!function($){
  var common=function(){
  };
  common.prototype.confg={
    baseTemplae:'  <div class="control-wrap">'+
        '<span  class="move-handle">'+
            '<i ></i>'+
            '<i ></i>'+
            '<i ></i>'+
        '</span>'+
        '<span class="ele-delete-icon" title="删除">×</span>'+
      '</div>'
  }
  common.prototype.commons={
    baseCommons:{
      addItem:function(v){
        this.items.push(v);
      },
      items:[],
      el:'#baseCommons'
    },
    weightCommons:{
      addItem:function(v){
        this.items.push(v);
      },
      items:[],
      el:'#weightCommons'
    },
    otherCommons:{
      addItem:function(v){
          alert(JSON.stringify(this));
        this.items.push(v);
      },
      items:[],
      el:'#otherCommons'
    }
  };
  common.prototype.init=function(){
      for(var i in this.commons){
          const o=this.commons[i];

          const panel=$(o.el);

          o.items.forEach(function(k){
              const html=$("<li class='draggable' > "+
                      "<div class='handle'>"+
                      "<i class='icon-container iconfont "+k.icon+"'></i> "+
                      "<span>"+k.lable+"</span> "+
                      "</div>"+
                      "</li>");

            html.data("params",k);
            panel.append(html);
      });
    };
  $( ".draggable" ).draggable({
        cursor: "move",
        handle:'.handle',
        connectToSortable: ".droppable",
        opacity: 0.7,
        appendTo:'body',
        helper: function( e,u ) {
          var target=$(e.target);
          if(target.is(".icon-container") || target.is("span")){
            target=target.parent() ;
          }

          var panel=$( "<div class='ui-widget-header'><div class='ui-widget-header-container'>"+target.html()+"</div></div>");
          panel.data("params",target.parent().data("params"));
          return panel;
        },
        revert: false
    });

    $( ".droppable" ).sortable({
      revert: false,
      axis:'y',
      appendTo:'body',
      cursor:'move',
      handle:".move-handle",
      tolerance:"intersect",
      beforeStop:function(e,u,h,i){
        var type="";
        if($(u.item).is(".ui-widget-header")){
            var header=$($(".app-wrap").find(".ui-widget-header")[0]);
            var data=header.data("params");
            header.css({width:"100%",height:'initial'});
            var soure=$.common.confg.baseTemplae+data.template;
            var templ=Handlebars.compile(soure);
            var commons=$(templ(data));
            header.html(commons);
            header.find(".commons").css(data.cssStyle);
            $(".app-wrap .commons-warp.select").removeClass("select");
            header.removeClass("ui-widget-header").addClass("commons-warp").addClass("select");
            if(data.onReandr){
              data.onReandr(header);
          }
        }
      },
      placeholder: "ui-state-highlight"
    });
  };
   $.extend({
     common:new common()
   });
   Handlebars.registerHelper("getImgHeightForImgList",function(size, column,height) {

           height=parseInt(height.replace("px",''));
           var row=Math.ceil(size/column)
           return (height/row)+"px";
       });
       Handlebars.registerHelper("getFloatWidth",function(column) {
           return 100/column;
       });
}(window.jQuery);
!function($){
 var lableCommon={
  icon:'icon-yinpin',
  lable:'音频',
  type:'title',
  template:'<label class="commons-lable commons" > {{text}} </lable>',
  text:'请输入标题内容',
  cssStyle:{
    color:'black',
    'font-size':'14px',
    'background-color':'#f0f0f0',
    height:'28px'
  }
}
$.common.commons.baseCommons.addItem(lableCommon);
}(window.jQuery);
!function($){
  var titleCommons={
      icon:'icon-wenben',
      lable:'文本',
      template:'<div>'+
                '<span class="commons-title commons vcenter"> {{text}}</span>'+
               '</div>',
      text:'请输入文本内容',
      type:"label",
      cssStyle:{
        color:'black',
        'font-size':'12px',
        'text-align':'left'
      }
    };
$.common.commons.baseCommons.addItem(titleCommons);

}(window.jQuery);
!function($){
var button={
  icon:'icon-anniu',
  lable:'按钮',
  type:'button',
  template:'  <div style="background:white">'+
              '<a href="javascript:;" class="weui-btn weui-btn_warn commons-button commons">{{text}}</a>'+
           '</div>',
  text:'按钮',
  cssStyle:{
    color:'white',
    'font-size':'14px',
    'background-color':'#e64340',
    'border-radius': '0px',
    width:'100px',
    height:'35px'
  }
};
  $.common.commons.baseCommons.addItem(button);
}(window.jQuery);
!function($){
    var img={
        icon:'icon-tupian',
        lable:'图片',
        type:'img',
        template:' <div class="vcenter" ><img class="commons-img commons " src="{{{imgUrl}}}"/></div>',
        imgUrl:'http://uploads.xuexila.com/allimg/1611/764-16111Q02U9.jpg',
        cssStyle:{
            color:'white',
            'font-size':'14px',
            'background-color':'#e64340',
            'border-radius': '0px',
            width:'100%',height:'100px'
        }
    };
    $.common.commons.baseCommons.addItem(img);
}(window.jQuery);

!function($){
    var imgList={
        icon:'icon-uipiclist',
        lable:'图片列表',
        type:'imgList',
        column:3,
        template:'<div class="commons-imgList commons">'+
                '{{#each data }}'+
                '<div style="width:{{getFloatWidth ../column}}%;height:{{getImgHeightForImgList ../data.length ../column ../cssStyle.height}}" class="item">'+
                '<img  src="{{imgUrl}}">'+
                '<span class="title">{{title}}</span>'+
                '</div>'+
                '{{/each}}'+
                '</div>',
        data:[
            {imgUrl:'http://i02.pictn.sogoucdn.com/9e6f1d432aaa9aab',title:'图片一'},
            {imgUrl:'http://i02.pictn.sogoucdn.com/30a2e0e0da6f35a0',title:'图片二'},
            {imgUrl:'http://img.19yxw.com/wy/update/2015818/201581812562060364.jpg',title:'图片三'},
            {imgUrl:'http://i01.pic.sogou.com/0f3689382065243d',title:'图片四'},
            {imgUrl:'http://i01.pictn.sogoucdn.com/9c760130c16601d3',title:'图片五'},
            {imgUrl:'http://i01.pictn.sogoucdn.com/9c760130c16601d3',title:'图片六'}
            ],
        cssStyle:{
            color:'white',
            'font-size':'14px',
            'background-color':'white',
            'border-radius': '0px',
            height:'200px'
        }
    };
    $.common.commons.baseCommons.addItem(imgList);
}(window.jQuery);

!function($){
    var classify={
        icon:'icon-fenlei',
        lable:'分类',
        type:'classify',
        template:
        '<div class="commons-classify commons swiper-container weui-navbar ">'
           + '{{#each data}}'
            +'<div class="weui-navbar__item vcenter">{{this.value}}</div>'+
          '{{/each}}'+
        '</div>',
        data:[
            {value:'分类一'},
            {value:'分类二'},
            {value:'分类三'},
            {value:'分类四'},
        ],
        cssStyle:{
            color:'#908a8a',
            'background-color':'rgb(226, 224, 221)',
            width:'100%',
            height:'30px'
        }
    };
    $.common.commons.baseCommons.addItem(classify);
}(window.jQuery);
!function($){
    var imgBannerCommons={
        icon:'icon-lunbozutu',
        lable:'图片轮播',
        template:
        '<div class="swiper-container  commons-imgBanner commons">'
            + '<div class="swiper-wrapper">'
                    + '{{#each data}}'
                        + '<div class="swiper-slide">'+'<img src="{{this.imgUrl}}" alt=""/>'+'</div>'
                    + '{{/each}}'+
            + '</div>'+

        '</div>',
        data:[
            {imgUrl:'/wei/img/swiper-1.jpg'},
            {imgUrl:'/wei/img/swiper-2.jpg'},
            {imgUrl:'/wei/img/swiper-3.jpg'},
        ],
        type:"imgBanner",
        onReandr:function(v){
            v.find(".swiper-container").swiper({
                autoplayDisableOnInteraction:false,
                loop : true,
                autoplay:1500
            });
        },
        cssStyle:{
            color:'white',
            'background-color':'#e64340',
            'border-radius': '0px',
            width:'100%',
            height:'200px'
        }
    };
    $.common.commons.baseCommons.addItem(imgBannerCommons);

}(window.jQuery);!function($){
    var dataList={
        icon:'icon-liebiao-copy',
        lable:'列表',
        type:'dataList',
        template:' <div class="weui-panel weui-panel_access  commons-dataList commons">'+
                            '<div class="weui-panel__bd">'+
                                '{{#each data}}'+
                                    '<span class="weui-media-box weui-media-box_appmsg">'+
                                     ' <div class="weui-media-box__hd">'+
                                         '<img class="weui-media-box__thumb" src="{{imgUrl}}">'+
                                      '</div>'+
                                    '<div class="weui-media-box__bd">'+
                                       '<h4 class="weui-media-box__title">{{title}}</h4>'+
                                        '<p class="weui-media-box__desc">{{text}}</p>'+
                                    '</div>'+
                                   '</span>'+
                                '{{/each}}'+
                        '</div>'+
                   '</div>',
        data:[
            {
            imgUrl:'http://icon.nipic.com/BannerPic/20170511/original/20170511102754_1.jpg',
            title:'标题',
            text:'我是简介',
            },
            {
                imgUrl:'http://icon.nipic.com/BannerPic/20170511/original/20170511102754_1.jpg',
                title:'标题',
                text:'我是简介',
            },
            {
                imgUrl:'http://icon.nipic.com/BannerPic/20170511/original/20170511102754_1.jpg',
                title:'标题',
                text:'我是简介',
            }
        ],
        cssStyle:{
        }
    }
    $.common.commons.baseCommons.addItem(dataList);
}(window.jQuery);

!function($){
    var video={
        icon:'icon-shipin',
        lable:'视频',
        type:'video',
        template:' <div class="commons-video commons " >'+
                    '{{{videoUrl}}}'+
                    '</div>',
            videoUrl:"<iframe height=498 width=510 src='http://player.youku.com/embed/XMjgzNjcxNDA3Ng==' frameborder=0 'allowfullscreen'></iframe>",
        cssStyle:{
            height:'200px','background-color': '#B3B3B3'
        }
    };
    $.common.commons.baseCommons.addItem(video);
}(window.jQuery);
!function($){
  var common=function(){
  };
  common.prototype.confg={
    baseTemplae:'  <div class="control-wrap">'+
        '<span  class="move-handle">'+
            '<i ></i>'+
            '<i ></i>'+
            '<i ></i>'+
        '</span>'+
        '<span class="ele-delete-icon" title="删除">×</span>'+
      '</div>'
  }
  common.prototype.commons={
    baseCommons:{
      addItem:function(v){
        this.items.push(v);
      },
      items:[],
      el:'#baseCommons'
    },
    weightCommons:{
      addItem:function(v){
        this.items.push(v);
      },
      items:[],
      el:'#weightCommons'
    },
    otherCommons:{
      addItem:function(v){
          alert(JSON.stringify(this));
        this.items.push(v);
      },
      items:[],
      el:'#otherCommons'
    }
  };
  common.prototype.init=function(){
      for(var i in this.commons){
          const o=this.commons[i];

          const panel=$(o.el);

          o.items.forEach(function(k){
              const html=$("<li class='draggable' > "+
                      "<div class='handle'>"+
                      "<i class='icon-container iconfont "+k.icon+"'></i> "+
                      "<span>"+k.lable+"</span> "+
                      "</div>"+
                      "</li>");

            html.data("params",k);
            panel.append(html);
      });
    };
  $( ".draggable" ).draggable({
        cursor: "move",
        handle:'.handle',
        connectToSortable: ".droppable",
        opacity: 0.7,
        appendTo:'body',
        helper: function( e,u ) {
          var target=$(e.target);
          if(target.is(".icon-container") || target.is("span")){
            target=target.parent() ;
          }

          var panel=$( "<div class='ui-widget-header'><div class='ui-widget-header-container'>"+target.html()+"</div></div>");
          panel.data("params",target.parent().data("params"));
          return panel;
        },
        revert: false
    });

    $( ".droppable" ).sortable({
      revert: false,
      axis:'y',
      appendTo:'body',
      cursor:'move',
      handle:".move-handle",
      tolerance:"intersect",
      beforeStop:function(e,u,h,i){
        var type="";
        if($(u.item).is(".ui-widget-header")){
            var header=$($(".app-wrap").find(".ui-widget-header")[0]);
            var data=header.data("params");
            header.css({width:"100%",height:'initial'});
            var soure=$.common.confg.baseTemplae+data.template;
            var templ=Handlebars.compile(soure);
            var commons=$(templ(data));
            header.html(commons);
            header.find(".commons").css(data.cssStyle);
            $(".app-wrap .commons-warp.select").removeClass("select");
            header.removeClass("ui-widget-header").addClass("commons-warp").addClass("select");
            if(data.onReandr){
              data.onReandr(header);
          }
        }
      },
      placeholder: "ui-state-highlight"
    });
  };
   $.extend({
     common:new common()
   });
   Handlebars.registerHelper("getImgHeightForImgList",function(size, column,height) {

           height=parseInt(height.replace("px",''));
           var row=Math.ceil(size/column)
           return (height/row)+"px";
       });
       Handlebars.registerHelper("getFloatWidth",function(column) {
           return 100/column;
       });
}(window.jQuery);
!function($){
 var lableCommon={
  icon:'icon-yinpin',
  lable:'音频',
  type:'title',
  template:'<label class="commons-lable commons" > {{text}} </lable>',
  text:'请输入标题内容',
  cssStyle:{
    color:'black',
    'font-size':'14px',
    'background-color':'#f0f0f0',
    height:'28px'
  }
}
$.common.commons.baseCommons.addItem(lableCommon);
}(window.jQuery);
!function($){
  var titleCommons={
      icon:'icon-wenben',
      lable:'文本',
      template:'<div>'+
                '<span class="commons-title commons vcenter"> {{text}}</span>'+
               '</div>',
      text:'请输入文本内容',
      type:"label",
      cssStyle:{
        color:'black',
        'font-size':'12px',
        'text-align':'left'
      }
    };
$.common.commons.baseCommons.addItem(titleCommons);

}(window.jQuery);
!function($){
var button={
  icon:'icon-anniu',
  lable:'按钮',
  type:'button',
  template:'  <div style="background:white">'+
              '<a href="javascript:;" class="weui-btn weui-btn_warn commons-button commons">{{text}}</a>'+
           '</div>',
  text:'按钮',
  cssStyle:{
    color:'white',
    'font-size':'14px',
    'background-color':'#e64340',
    'border-radius': '0px',
    width:'100px',
    height:'35px'
  }
};
  $.common.commons.baseCommons.addItem(button);
}(window.jQuery);
!function($){
    var img={
        icon:'icon-tupian',
        lable:'图片',
        type:'img',
        template:' <div class="vcenter" ><img class="commons-img commons " src="{{{imgUrl}}}"/></div>',
        imgUrl:'http://uploads.xuexila.com/allimg/1611/764-16111Q02U9.jpg',
        cssStyle:{
            color:'white',
            'font-size':'14px',
            'background-color':'#e64340',
            'border-radius': '0px',
            width:'100%',height:'100px'
        }
    };
    $.common.commons.baseCommons.addItem(img);
}(window.jQuery);

!function($){
    var imgList={
        icon:'icon-uipiclist',
        lable:'图片列表',
        type:'imgList',
        column:3,
        template:'<div class="commons-imgList commons">'+
                '{{#each data }}'+
                '<div style="width:{{getFloatWidth ../column}}%;height:{{getImgHeightForImgList ../data.length ../column ../cssStyle.height}}" class="item">'+
                '<img  src="{{imgUrl}}">'+
                '<span class="title">{{title}}</span>'+
                '</div>'+
                '{{/each}}'+
                '</div>',
        data:[
            {imgUrl:'http://i02.pictn.sogoucdn.com/9e6f1d432aaa9aab',title:'图片一'},
            {imgUrl:'http://i02.pictn.sogoucdn.com/30a2e0e0da6f35a0',title:'图片二'},
            {imgUrl:'http://img.19yxw.com/wy/update/2015818/201581812562060364.jpg',title:'图片三'},
            {imgUrl:'http://i01.pic.sogou.com/0f3689382065243d',title:'图片四'},
            {imgUrl:'http://i01.pictn.sogoucdn.com/9c760130c16601d3',title:'图片五'},
            {imgUrl:'http://i01.pictn.sogoucdn.com/9c760130c16601d3',title:'图片六'}
            ],
        cssStyle:{
            color:'white',
            'font-size':'14px',
            'background-color':'white',
            'border-radius': '0px',
            height:'200px'
        }
    };
    $.common.commons.baseCommons.addItem(imgList);
}(window.jQuery);

!function($){
    var classify={
        icon:'icon-fenlei',
        lable:'分类',
        type:'classify',
        template:
        '<div class="commons-classify commons swiper-container weui-navbar ">'
           + '{{#each data}}'
            +'<div class="weui-navbar__item vcenter">{{this.value}}</div>'+
          '{{/each}}'+
        '</div>',
        data:[
            {value:'分类一'},
            {value:'分类二'},
            {value:'分类三'},
            {value:'分类四'},
        ],
        cssStyle:{
            color:'#908a8a',
            'background-color':'rgb(226, 224, 221)',
            width:'100%',
            height:'30px'
        }
    };
    $.common.commons.baseCommons.addItem(classify);
}(window.jQuery);
!function($){
    var imgBannerCommons={
        icon:'icon-lunbozutu',
        lable:'图片轮播',
        template:
        '<div class="swiper-container  commons-imgBanner commons">'
            + '<div class="swiper-wrapper">'
                    + '{{#each data}}'
                        + '<div class="swiper-slide">'+'<img src="{{this.imgUrl}}" alt=""/>'+'</div>'
                    + '{{/each}}'+
            + '</div>'+

        '</div>',
        data:[
            {imgUrl:'/wei/img/swiper-1.jpg'},
            {imgUrl:'/wei/img/swiper-2.jpg'},
            {imgUrl:'/wei/img/swiper-3.jpg'},
        ],
        type:"imgBanner",
        onReandr:function(v){
            v.find(".swiper-container").swiper({
                autoplayDisableOnInteraction:false,
                loop : true,
                autoplay:1500
            });
        },
        cssStyle:{
            color:'white',
            'background-color':'#e64340',
            'border-radius': '0px',
            width:'100%',
            height:'200px'
        }
    };
    $.common.commons.baseCommons.addItem(imgBannerCommons);

}(window.jQuery);!function($){
    var dataList={
        icon:'icon-liebiao-copy',
        lable:'列表',
        type:'dataList',
        template:' <div class="weui-panel weui-panel_access  commons-dataList commons">'+
                            '<div class="weui-panel__bd">'+
                                '{{#each data}}'+
                                    '<span class="weui-media-box weui-media-box_appmsg">'+
                                     ' <div class="weui-media-box__hd">'+
                                         '<img class="weui-media-box__thumb" src="{{imgUrl}}">'+
                                      '</div>'+
                                    '<div class="weui-media-box__bd">'+
                                       '<h4 class="weui-media-box__title">{{title}}</h4>'+
                                        '<p class="weui-media-box__desc">{{text}}</p>'+
                                    '</div>'+
                                   '</span>'+
                                '{{/each}}'+
                        '</div>'+
                   '</div>',
        data:[
            {
            imgUrl:'http://icon.nipic.com/BannerPic/20170511/original/20170511102754_1.jpg',
            title:'标题',
            text:'我是简介',
            },
            {
                imgUrl:'http://icon.nipic.com/BannerPic/20170511/original/20170511102754_1.jpg',
                title:'标题',
                text:'我是简介',
            },
            {
                imgUrl:'http://icon.nipic.com/BannerPic/20170511/original/20170511102754_1.jpg',
                title:'标题',
                text:'我是简介',
            }
        ],
        cssStyle:{
        }
    }
    $.common.commons.baseCommons.addItem(dataList);
}(window.jQuery);

!function($){
    var video={
        icon:'icon-shipin',
        lable:'视频',
        type:'video',
        template:' <div class="commons-video commons " >'+
                    '{{{videoUrl}}}'+
                    '</div>',
            videoUrl:"<iframe height=498 width=510 src='http://player.youku.com/embed/XMjgzNjcxNDA3Ng==' frameborder=0 'allowfullscreen'></iframe>",
        cssStyle:{
            height:'200px','background-color': '#B3B3B3'
        }
    };
    $.common.commons.baseCommons.addItem(video);
}(window.jQuery);
!function($){
    var frequency={
        icon:'icon-yinpin',
        lable:'音频',
        template:' <div class="vcenter" ><img class="commons-img commons " src="{{{imgUrl}}}"/></div>',
        imgUrl:'http://uploads.xuexila.com/allimg/1611/764-16111Q02U9.jpg',
        cssStyle:{
            color:'white',
            'font-size':'14px',
            'background-color':'#e64340',
            'border-radius': '0px',
            width:'100%',height:'100px'
        }
    };
    alert(JSON.stringify($.common.commons.otherCommons));
    $.common.commons.otherCommons.addItem(frequency);
}(window.jQuery);!function($){
  var common=function(){
  };
  common.prototype.confg={
    baseTemplae:'  <div class="control-wrap">'+
        '<span  class="move-handle">'+
            '<i ></i>'+
            '<i ></i>'+
            '<i ></i>'+
        '</span>'+
        '<span class="ele-delete-icon" title="删除">×</span>'+
      '</div>'
  }
  common.prototype.commons={
    baseCommons:{
      addItem:function(v){
        this.items.push(v);
      },
      items:[],
      el:'#baseCommons'
    },
    weightCommons:{
      addItem:function(v){
        this.items.push(v);
      },
      items:[],
      el:'#weightCommons'
    },
    otherCommons:{
      addItem:function(v){
          alert(JSON.stringify(this));
        this.items.push(v);
      },
      items:[],
      el:'#otherCommons'
    }
  };
  common.prototype.init=function(){
      for(var i in this.commons){
          const o=this.commons[i];

          const panel=$(o.el);

          o.items.forEach(function(k){
              const html=$("<li class='draggable' > "+
                      "<div class='handle'>"+
                      "<i class='icon-container iconfont "+k.icon+"'></i> "+
                      "<span>"+k.lable+"</span> "+
                      "</div>"+
                      "</li>");

            html.data("params",k);
            panel.append(html);
      });
    };
  $( ".draggable" ).draggable({
        cursor: "move",
        handle:'.handle',
        connectToSortable: ".droppable",
        opacity: 0.7,
        appendTo:'body',
        helper: function( e,u ) {
          var target=$(e.target);
          if(target.is(".icon-container") || target.is("span")){
            target=target.parent() ;
          }

          var panel=$( "<div class='ui-widget-header'><div class='ui-widget-header-container'>"+target.html()+"</div></div>");
          panel.data("params",target.parent().data("params"));
          return panel;
        },
        revert: false
    });

    $( ".droppable" ).sortable({
      revert: false,
      axis:'y',
      appendTo:'body',
      cursor:'move',
      handle:".move-handle",
      tolerance:"intersect",
      beforeStop:function(e,u,h,i){
        var type="";
        if($(u.item).is(".ui-widget-header")){
            var header=$($(".app-wrap").find(".ui-widget-header")[0]);
            var data=header.data("params");
            header.css({width:"100%",height:'initial'});
            var soure=$.common.confg.baseTemplae+data.template;
            var templ=Handlebars.compile(soure);
            var commons=$(templ(data));
            header.html(commons);
            header.find(".commons").css(data.cssStyle);
            $(".app-wrap .commons-warp.select").removeClass("select");
            header.removeClass("ui-widget-header").addClass("commons-warp").addClass("select");
            if(data.onReandr){
              data.onReandr(header);
          }
        }
      },
      placeholder: "ui-state-highlight"
    });
  };
   $.extend({
     common:new common()
   });
   Handlebars.registerHelper("getImgHeightForImgList",function(size, column,height) {

           height=parseInt(height.replace("px",''));
           var row=Math.ceil(size/column)
           return (height/row)+"px";
       });
       Handlebars.registerHelper("getFloatWidth",function(column) {
           return 100/column;
       });
}(window.jQuery);
!function($){
 var lableCommon={
  icon:'icon-wenben',
  lable:'文本',
  type:'title',
  template:'<label class="commons-lable commons" > {{text}} </lable>',
  text:'请输入标题内容',
  cssStyle:{
    color:'black',
    'font-size':'14px',
    'background-color':'#f0f0f0',
    height:'28px'
  }
}
$.common.commons.baseCommons.addItem(lableCommon);
}(window.jQuery);
!function($){
  var titleCommons={
      icon:'icon-wenben',
      lable:'文本',
      template:'<div>'+
                '<span class="commons-title commons vcenter"> {{text}}</span>'+
               '</div>',
      text:'请输入文本内容',
      type:"label",
      cssStyle:{
        color:'black',
        'font-size':'12px',
        'text-align':'left'
      }
    };
$.common.commons.baseCommons.addItem(titleCommons);

}(window.jQuery);
!function($){
var button={
  icon:'icon-anniu',
  lable:'按钮',
  type:'button',
  template:'  <div style="background:white">'+
              '<a href="javascript:;" class="weui-btn weui-btn_warn commons-button commons">{{text}}</a>'+
           '</div>',
  text:'按钮',
  cssStyle:{
    color:'white',
    'font-size':'14px',
    'background-color':'#e64340',
    'border-radius': '0px',
    width:'100px',
    height:'35px'
  }
};
  $.common.commons.baseCommons.addItem(button);
}(window.jQuery);
!function($){
    var img={
        icon:'icon-tupian',
        lable:'图片',
        type:'img',
        template:' <div class="vcenter" ><img class="commons-img commons " src="{{{imgUrl}}}"/></div>',
        imgUrl:'http://uploads.xuexila.com/allimg/1611/764-16111Q02U9.jpg',
        cssStyle:{
            color:'white',
            'font-size':'14px',
            'background-color':'#e64340',
            'border-radius': '0px',
            width:'100%',height:'100px'
        }
    };
    $.common.commons.baseCommons.addItem(img);
}(window.jQuery);

!function($){
    var imgList={
        icon:'icon-uipiclist',
        lable:'图片列表',
        type:'imgList',
        column:3,
        template:'<div class="commons-imgList commons">'+
                '{{#each data }}'+
                '<div style="width:{{getFloatWidth ../column}}%;height:{{getImgHeightForImgList ../data.length ../column ../cssStyle.height}}" class="item">'+
                '<img  src="{{imgUrl}}">'+
                '<span class="title">{{title}}</span>'+
                '</div>'+
                '{{/each}}'+
                '</div>',
        data:[
            {imgUrl:'http://i02.pictn.sogoucdn.com/9e6f1d432aaa9aab',title:'图片一'},
            {imgUrl:'http://i02.pictn.sogoucdn.com/30a2e0e0da6f35a0',title:'图片二'},
            {imgUrl:'http://img.19yxw.com/wy/update/2015818/201581812562060364.jpg',title:'图片三'},
            {imgUrl:'http://i01.pic.sogou.com/0f3689382065243d',title:'图片四'},
            {imgUrl:'http://i01.pictn.sogoucdn.com/9c760130c16601d3',title:'图片五'},
            {imgUrl:'http://i01.pictn.sogoucdn.com/9c760130c16601d3',title:'图片六'}
            ],
        cssStyle:{
            color:'white',
            'font-size':'14px',
            'background-color':'white',
            'border-radius': '0px',
            height:'200px'
        }
    };
    $.common.commons.baseCommons.addItem(imgList);
}(window.jQuery);

!function($){
    var classify={
        icon:'icon-fenlei',
        lable:'分类',
        type:'classify',
        template:
        '<div class="commons-classify commons swiper-container weui-navbar ">'
           + '{{#each data}}'
            +'<div class="weui-navbar__item vcenter">{{this.value}}</div>'+
          '{{/each}}'+
        '</div>',
        data:[
            {value:'分类一'},
            {value:'分类二'},
            {value:'分类三'},
            {value:'分类四'},
        ],
        cssStyle:{
            color:'#908a8a',
            'background-color':'rgb(226, 224, 221)',
            width:'100%',
            height:'30px'
        }
    };
    $.common.commons.baseCommons.addItem(classify);
}(window.jQuery);
!function($){
    var imgBannerCommons={
        icon:'icon-lunbozutu',
        lable:'图片轮播',
        template:
        '<div class="swiper-container  commons-imgBanner commons">'
            + '<div class="swiper-wrapper">'
                    + '{{#each data}}'
                        + '<div class="swiper-slide">'+'<img src="{{this.imgUrl}}" alt=""/>'+'</div>'
                    + '{{/each}}'+
            + '</div>'+

        '</div>',
        data:[
            {imgUrl:'/wei/img/swiper-1.jpg'},
            {imgUrl:'/wei/img/swiper-2.jpg'},
            {imgUrl:'/wei/img/swiper-3.jpg'},
        ],
        type:"imgBanner",
        onReandr:function(v){
            v.find(".swiper-container").swiper({
                autoplayDisableOnInteraction:false,
                loop : true,
                autoplay:1500
            });
        },
        cssStyle:{
            color:'white',
            'background-color':'#e64340',
            'border-radius': '0px',
            width:'100%',
            height:'200px'
        }
    };
    $.common.commons.baseCommons.addItem(imgBannerCommons);

}(window.jQuery);!function($){
    var dataList={
        icon:'icon-liebiao-copy',
        lable:'列表',
        type:'dataList',
        template:' <div class="weui-panel weui-panel_access  commons-dataList commons">'+
                            '<div class="weui-panel__bd">'+
                                '{{#each data}}'+
                                    '<span class="weui-media-box weui-media-box_appmsg">'+
                                     ' <div class="weui-media-box__hd">'+
                                         '<img class="weui-media-box__thumb" src="{{imgUrl}}">'+
                                      '</div>'+
                                    '<div class="weui-media-box__bd">'+
                                       '<h4 class="weui-media-box__title">{{title}}</h4>'+
                                        '<p class="weui-media-box__desc">{{text}}</p>'+
                                    '</div>'+
                                   '</span>'+
                                '{{/each}}'+
                        '</div>'+
                   '</div>',
        data:[
            {
            imgUrl:'http://icon.nipic.com/BannerPic/20170511/original/20170511102754_1.jpg',
            title:'标题',
            text:'我是简介',
            },
            {
                imgUrl:'http://icon.nipic.com/BannerPic/20170511/original/20170511102754_1.jpg',
                title:'标题',
                text:'我是简介',
            },
            {
                imgUrl:'http://icon.nipic.com/BannerPic/20170511/original/20170511102754_1.jpg',
                title:'标题',
                text:'我是简介',
            }
        ],
        cssStyle:{
        }
    }
    $.common.commons.baseCommons.addItem(dataList);
}(window.jQuery);

!function($){
    var video={
        icon:'icon-shipin',
        lable:'视频',
        type:'video',
        template:' <div class="commons-video commons " >'+
                    '{{{videoUrl}}}'+
                    '</div>',
            videoUrl:"<iframe height=498 width=510 src='http://player.youku.com/embed/XMjgzNjcxNDA3Ng==' frameborder=0 'allowfullscreen'></iframe>",
        cssStyle:{
            height:'200px','background-color': '#B3B3B3'
        }
    };
    $.common.commons.baseCommons.addItem(video);
}(window.jQuery);
!function($){
    var frequency={
        icon:'icon-yinpin',
        lable:'音频',
        template:' <div class="vcenter" ><img class="commons-img commons " src="{{{imgUrl}}}"/></div>',
        imgUrl:'http://uploads.xuexila.com/allimg/1611/764-16111Q02U9.jpg',
        cssStyle:{
            color:'white',
            'font-size':'14px',
            'background-color':'#e64340',
            'border-radius': '0px',
            width:'100%',height:'100px'
        }
    };
    alert(JSON.stringify($.common.commons.otherCommons));
    $.common.commons.otherCommons.addItem(frequency);
}(window.jQuery);!function($){
  var common=function(){
  };
  common.prototype.confg={
    baseTemplae:'  <div class="control-wrap">'+
        '<span  class="move-handle">'+
            '<i ></i>'+
            '<i ></i>'+
            '<i ></i>'+
        '</span>'+
        '<span class="ele-delete-icon" title="删除">×</span>'+
      '</div>'
  }
  common.prototype.commons={
    baseCommons:{
      addItem:function(v){
        this.items.push(v);
      },
      items:[],
      el:'#baseCommons'
    },
    weightCommons:{
      addItem:function(v){
        this.items.push(v);
      },
      items:[],
      el:'#weightCommons'
    },
    otherCommons:{
      addItem:function(v){
          alert(JSON.stringify(this));
        this.items.push(v);
      },
      items:[],
      el:'#otherCommons'
    }
  };
  common.prototype.init=function(){
      for(var i in this.commons){
          const o=this.commons[i];

          const panel=$(o.el);

          o.items.forEach(function(k){
              const html=$("<li class='draggable' > "+
                      "<div class='handle'>"+
                      "<i class='icon-container iconfont "+k.icon+"'></i> "+
                      "<span>"+k.lable+"</span> "+
                      "</div>"+
                      "</li>");

            html.data("params",k);
            panel.append(html);
      });
    };
  $( ".draggable" ).draggable({
        cursor: "move",
        handle:'.handle',
        connectToSortable: ".droppable",
        opacity: 0.7,
        appendTo:'body',
        helper: function( e,u ) {
          var target=$(e.target);
          if(target.is(".icon-container") || target.is("span")){
            target=target.parent() ;
          }

          var panel=$( "<div class='ui-widget-header'><div class='ui-widget-header-container'>"+target.html()+"</div></div>");
          panel.data("params",target.parent().data("params"));
          return panel;
        },
        revert: false
    });

    $( ".droppable" ).sortable({
      revert: false,
      axis:'y',
      appendTo:'body',
      cursor:'move',
      handle:".move-handle",
      tolerance:"intersect",
      beforeStop:function(e,u,h,i){
        var type="";
        if($(u.item).is(".ui-widget-header")){
            var header=$($(".app-wrap").find(".ui-widget-header")[0]);
            var data=header.data("params");
            header.css({width:"100%",height:'initial'});
            var soure=$.common.confg.baseTemplae+data.template;
            var templ=Handlebars.compile(soure);
            var commons=$(templ(data));
            header.html(commons);
            header.find(".commons").css(data.cssStyle);
            $(".app-wrap .commons-warp.select").removeClass("select");
            header.removeClass("ui-widget-header").addClass("commons-warp").addClass("select");
            if(data.onReandr){
              data.onReandr(header);
          }
        }
      },
      placeholder: "ui-state-highlight"
    });
  };
   $.extend({
     common:new common()
   });
   Handlebars.registerHelper("getImgHeightForImgList",function(size, column,height) {

           height=parseInt(height.replace("px",''));
           var row=Math.ceil(size/column)
           return (height/row)+"px";
       });
       Handlebars.registerHelper("getFloatWidth",function(column) {
           return 100/column;
       });
}(window.jQuery);
!function($){
 var lableCommon={
  icon:'icon-biaoti',
  lable:'标题',
  type:'title',
  template:'<label class="commons-lable commons" > {{text}} </lable>',
  text:'请输入标题内容',
  cssStyle:{
    color:'black',
    'font-size':'14px',
    'background-color':'#f0f0f0',
    height:'28px'
  }
}
$.common.commons.baseCommons.addItem(lableCommon);
}(window.jQuery);
!function($){
  var titleCommons={
      icon:'icon-wenben',
      lable:'文本',
      template:'<div>'+
                '<span class="commons-title commons vcenter"> {{text}}</span>'+
               '</div>',
      text:'请输入文本内容',
      type:"label",
      cssStyle:{
        color:'black',
        'font-size':'12px',
        'text-align':'left'
      }
    };
$.common.commons.baseCommons.addItem(titleCommons);

}(window.jQuery);
!function($){
var button={
  icon:'icon-anniu',
  lable:'按钮',
  type:'button',
  template:'  <div style="background:white">'+
              '<a href="javascript:;" class="weui-btn weui-btn_warn commons-button commons">{{text}}</a>'+
           '</div>',
  text:'按钮',
  cssStyle:{
    color:'white',
    'font-size':'14px',
    'background-color':'#e64340',
    'border-radius': '0px',
    width:'100px',
    height:'35px'
  }
};
  $.common.commons.baseCommons.addItem(button);
}(window.jQuery);
!function($){
    var img={
        icon:'icon-tupian',
        lable:'图片',
        type:'img',
        template:' <div class="vcenter" ><img class="commons-img commons " src="{{{imgUrl}}}"/></div>',
        imgUrl:'http://uploads.xuexila.com/allimg/1611/764-16111Q02U9.jpg',
        cssStyle:{
            color:'white',
            'font-size':'14px',
            'background-color':'#e64340',
            'border-radius': '0px',
            width:'100%',height:'100px'
        }
    };
    $.common.commons.baseCommons.addItem(img);
}(window.jQuery);

!function($){
    var imgList={
        icon:'icon-uipiclist',
        lable:'图片列表',
        type:'imgList',
        column:3,
        template:'<div class="commons-imgList commons">'+
                '{{#each data }}'+
                '<div style="width:{{getFloatWidth ../column}}%;height:{{getImgHeightForImgList ../data.length ../column ../cssStyle.height}}" class="item">'+
                '<img  src="{{imgUrl}}">'+
                '<span class="title">{{title}}</span>'+
                '</div>'+
                '{{/each}}'+
                '</div>',
        data:[
            {imgUrl:'http://i02.pictn.sogoucdn.com/9e6f1d432aaa9aab',title:'图片一'},
            {imgUrl:'http://i02.pictn.sogoucdn.com/30a2e0e0da6f35a0',title:'图片二'},
            {imgUrl:'http://img.19yxw.com/wy/update/2015818/201581812562060364.jpg',title:'图片三'},
            {imgUrl:'http://i01.pic.sogou.com/0f3689382065243d',title:'图片四'},
            {imgUrl:'http://i01.pictn.sogoucdn.com/9c760130c16601d3',title:'图片五'},
            {imgUrl:'http://i01.pictn.sogoucdn.com/9c760130c16601d3',title:'图片六'}
            ],
        cssStyle:{
            color:'white',
            'font-size':'14px',
            'background-color':'white',
            'border-radius': '0px',
            height:'200px'
        }
    };
    $.common.commons.baseCommons.addItem(imgList);
}(window.jQuery);

!function($){
    var classify={
        icon:'icon-fenlei',
        lable:'分类',
        type:'classify',
        template:
        '<div class="commons-classify commons swiper-container weui-navbar ">'
           + '{{#each data}}'
            +'<div class="weui-navbar__item vcenter">{{this.value}}</div>'+
          '{{/each}}'+
        '</div>',
        data:[
            {value:'分类一'},
            {value:'分类二'},
            {value:'分类三'},
            {value:'分类四'},
        ],
        cssStyle:{
            color:'#908a8a',
            'background-color':'rgb(226, 224, 221)',
            width:'100%',
            height:'30px'
        }
    };
    $.common.commons.baseCommons.addItem(classify);
}(window.jQuery);
!function($){
    var imgBannerCommons={
        icon:'icon-lunbozutu',
        lable:'图片轮播',
        template:
        '<div class="swiper-container  commons-imgBanner commons">'
            + '<div class="swiper-wrapper">'
                    + '{{#each data}}'
                        + '<div class="swiper-slide">'+'<img src="{{this.imgUrl}}" alt=""/>'+'</div>'
                    + '{{/each}}'+
            + '</div>'+

        '</div>',
        data:[
            {imgUrl:'/wei/img/swiper-1.jpg'},
            {imgUrl:'/wei/img/swiper-2.jpg'},
            {imgUrl:'/wei/img/swiper-3.jpg'},
        ],
        type:"imgBanner",
        onReandr:function(v){
            v.find(".swiper-container").swiper({
                autoplayDisableOnInteraction:false,
                loop : true,
                autoplay:1500
            });
        },
        cssStyle:{
            color:'white',
            'background-color':'#e64340',
            'border-radius': '0px',
            width:'100%',
            height:'200px'
        }
    };
    $.common.commons.baseCommons.addItem(imgBannerCommons);

}(window.jQuery);!function($){
    var dataList={
        icon:'icon-liebiao-copy',
        lable:'列表',
        type:'dataList',
        template:' <div class="weui-panel weui-panel_access  commons-dataList commons">'+
                            '<div class="weui-panel__bd">'+
                                '{{#each data}}'+
                                    '<span class="weui-media-box weui-media-box_appmsg">'+
                                     ' <div class="weui-media-box__hd">'+
                                         '<img class="weui-media-box__thumb" src="{{imgUrl}}">'+
                                      '</div>'+
                                    '<div class="weui-media-box__bd">'+
                                       '<h4 class="weui-media-box__title">{{title}}</h4>'+
                                        '<p class="weui-media-box__desc">{{text}}</p>'+
                                    '</div>'+
                                   '</span>'+
                                '{{/each}}'+
                        '</div>'+
                   '</div>',
        data:[
            {
            imgUrl:'http://icon.nipic.com/BannerPic/20170511/original/20170511102754_1.jpg',
            title:'标题',
            text:'我是简介',
            },
            {
                imgUrl:'http://icon.nipic.com/BannerPic/20170511/original/20170511102754_1.jpg',
                title:'标题',
                text:'我是简介',
            },
            {
                imgUrl:'http://icon.nipic.com/BannerPic/20170511/original/20170511102754_1.jpg',
                title:'标题',
                text:'我是简介',
            }
        ],
        cssStyle:{
        }
    }
    $.common.commons.baseCommons.addItem(dataList);
}(window.jQuery);

!function($){
    var video={
        icon:'icon-shipin',
        lable:'视频',
        type:'video',
        template:' <div class="commons-video commons " >'+
                    '{{{videoUrl}}}'+
                    '</div>',
            videoUrl:"<iframe height=498 width=510 src='http://player.youku.com/embed/XMjgzNjcxNDA3Ng==' frameborder=0 'allowfullscreen'></iframe>",
        cssStyle:{
            height:'200px','background-color': '#B3B3B3'
        }
    };
    $.common.commons.baseCommons.addItem(video);
}(window.jQuery);
!function($){
    var frequency={
        icon:'icon-yinpin',
        lable:'音频',
        template:' <div class="vcenter" ><img class="commons-img commons " src="{{{imgUrl}}}"/></div>',
        imgUrl:'http://uploads.xuexila.com/allimg/1611/764-16111Q02U9.jpg',
        cssStyle:{
            color:'white',
            'font-size':'14px',
            'background-color':'#e64340',
            'border-radius': '0px',
            width:'100%',height:'100px'
        }
    };
    alert(JSON.stringify($.common.commons.otherCommons));
    $.common.commons.otherCommons.addItem(frequency);
}(window.jQuery);!function($){
  var common=function(){
  };
  common.prototype.confg={
    baseTemplae:'  <div class="control-wrap">'+
        '<span  class="move-handle">'+
            '<i ></i>'+
            '<i ></i>'+
            '<i ></i>'+
        '</span>'+
        '<span class="ele-delete-icon" title="删除">×</span>'+
      '</div>'
  }
  common.prototype.commons={
    baseCommons:{
      addItem:function(v){
        this.items.push(v);
      },
      items:[],
      el:'#baseCommons'
    },
    weightCommons:{
      addItem:function(v){
        this.items.push(v);
      },
      items:[],
      el:'#weightCommons'
    },
    otherCommons:{
      addItem:function(v){
          alert(JSON.stringify(this));
        this.items.push(v);
      },
      items:[],
      el:'#otherCommons'
    }
  };
  common.prototype.init=function(){
      for(var i in this.commons){
          const o=this.commons[i];

          const panel=$(o.el);

          o.items.forEach(function(k){
              const html=$("<li class='draggable' > "+
                      "<div class='handle'>"+
                      "<i class='icon-container iconfont "+k.icon+"'></i> "+
                      "<span>"+k.lable+"</span> "+
                      "</div>"+
                      "</li>");

            html.data("params",k);
            panel.append(html);
      });
    };
  $( ".draggable" ).draggable({
        cursor: "move",
        handle:'.handle',
        connectToSortable: ".droppable",
        opacity: 0.7,
        appendTo:'body',
        helper: function( e,u ) {
          var target=$(e.target);
          if(target.is(".icon-container") || target.is("span")){
            target=target.parent() ;
          }

          var panel=$( "<div class='ui-widget-header'><div class='ui-widget-header-container'>"+target.html()+"</div></div>");
          panel.data("params",target.parent().data("params"));
          return panel;
        },
        revert: false
    });

    $( ".droppable" ).sortable({
      revert: false,
      axis:'y',
      appendTo:'body',
      cursor:'move',
      handle:".move-handle",
      tolerance:"intersect",
      beforeStop:function(e,u,h,i){
        var type="";
        if($(u.item).is(".ui-widget-header")){
            var header=$($(".app-wrap").find(".ui-widget-header")[0]);
            var data=header.data("params");
            header.css({width:"100%",height:'initial'});
            var soure=$.common.confg.baseTemplae+data.template;
            var templ=Handlebars.compile(soure);
            var commons=$(templ(data));
            header.html(commons);
            header.find(".commons").css(data.cssStyle);
            $(".app-wrap .commons-warp.select").removeClass("select");
            header.removeClass("ui-widget-header").addClass("commons-warp").addClass("select");
            if(data.onReandr){
              data.onReandr(header);
          }
        }
      },
      placeholder: "ui-state-highlight"
    });
  };
   $.extend({
     common:new common()
   });
   Handlebars.registerHelper("getImgHeightForImgList",function(size, column,height) {

           height=parseInt(height.replace("px",''));
           var row=Math.ceil(size/column)
           return (height/row)+"px";
       });
       Handlebars.registerHelper("getFloatWidth",function(column) {
           return 100/column;
       });
}(window.jQuery);
!function($){
 var lableCommon={
  icon:'icon-biaoti',
  lable:'标题',
  type:'title',
  template:'<label class="commons-lable commons" > {{text}} </lable>',
  text:'请输入标题内容',
  cssStyle:{
    color:'black',
    'font-size':'14px',
    'background-color':'#f0f0f0',
    height:'28px'
  }
}
$.common.commons.baseCommons.addItem(lableCommon);
}(window.jQuery);
!function($){
  var titleCommons={
      icon:'icon-wenben',
      lable:'文本',
      template:'<div>'+
                '<span class="commons-title commons vcenter"> {{text}}</span>'+
               '</div>',
      text:'请输入文本内容',
      type:"label",
      cssStyle:{
        color:'black',
        'font-size':'12px',
        'text-align':'left'
      }
    };
$.common.commons.baseCommons.addItem(titleCommons);

}(window.jQuery);
!function($){
var button={
  icon:'icon-anniu',
  lable:'按钮',
  type:'button',
  template:'  <div style="background:white">'+
              '<a href="javascript:;" class="weui-btn weui-btn_warn commons-button commons">{{text}}</a>'+
           '</div>',
  text:'按钮',
  cssStyle:{
    color:'white',
    'font-size':'14px',
    'background-color':'#e64340',
    'border-radius': '0px',
    width:'100px',
    height:'35px'
  }
};
  $.common.commons.baseCommons.addItem(button);
}(window.jQuery);
!function($){
    var img={
        icon:'icon-tupian',
        lable:'图片',
        type:'img',
        template:' <div class="vcenter" ><img class="commons-img commons " src="{{{imgUrl}}}"/></div>',
        imgUrl:'http://uploads.xuexila.com/allimg/1611/764-16111Q02U9.jpg',
        cssStyle:{
            color:'white',
            'font-size':'14px',
            'background-color':'#e64340',
            'border-radius': '0px',
            width:'100%',height:'100px'
        }
    };
    $.common.commons.baseCommons.addItem(img);
}(window.jQuery);

!function($){
    var imgList={
        icon:'icon-uipiclist',
        lable:'图片列表',
        type:'imgList',
        column:3,
        template:'<div class="commons-imgList commons">'+
                '{{#each data }}'+
                '<div style="width:{{getFloatWidth ../column}}%;height:{{getImgHeightForImgList ../data.length ../column ../cssStyle.height}}" class="item">'+
                '<img  src="{{imgUrl}}">'+
                '<span class="title">{{title}}</span>'+
                '</div>'+
                '{{/each}}'+
                '</div>',
        data:[
            {imgUrl:'http://i02.pictn.sogoucdn.com/9e6f1d432aaa9aab',title:'图片一'},
            {imgUrl:'http://i02.pictn.sogoucdn.com/30a2e0e0da6f35a0',title:'图片二'},
            {imgUrl:'http://img.19yxw.com/wy/update/2015818/201581812562060364.jpg',title:'图片三'},
            {imgUrl:'http://i01.pic.sogou.com/0f3689382065243d',title:'图片四'},
            {imgUrl:'http://i01.pictn.sogoucdn.com/9c760130c16601d3',title:'图片五'},
            {imgUrl:'http://i01.pictn.sogoucdn.com/9c760130c16601d3',title:'图片六'}
            ],
        cssStyle:{
            color:'white',
            'font-size':'14px',
            'background-color':'white',
            'border-radius': '0px',
            height:'200px'
        }
    };
    $.common.commons.baseCommons.addItem(imgList);
}(window.jQuery);

!function($){
    var classify={
        icon:'icon-fenlei',
        lable:'分类',
        type:'classify',
        template:
        '<div class="commons-classify commons swiper-container weui-navbar ">'
           + '{{#each data}}'
            +'<div class="weui-navbar__item vcenter">{{this.value}}</div>'+
          '{{/each}}'+
        '</div>',
        data:[
            {value:'分类一'},
            {value:'分类二'},
            {value:'分类三'},
            {value:'分类四'},
        ],
        cssStyle:{
            color:'#908a8a',
            'background-color':'rgb(226, 224, 221)',
            width:'100%',
            height:'30px'
        }
    };
    $.common.commons.baseCommons.addItem(classify);
}(window.jQuery);
!function($){
    var imgBannerCommons={
        icon:'icon-lunbozutu',
        lable:'图片轮播',
        template:
        '<div class="swiper-container  commons-imgBanner commons">'
            + '<div class="swiper-wrapper">'
                    + '{{#each data}}'
                        + '<div class="swiper-slide">'+'<img src="{{this.imgUrl}}" alt=""/>'+'</div>'
                    + '{{/each}}'+
            + '</div>'+

        '</div>',
        data:[
            {imgUrl:'/wei/img/swiper-1.jpg'},
            {imgUrl:'/wei/img/swiper-2.jpg'},
            {imgUrl:'/wei/img/swiper-3.jpg'},
        ],
        type:"imgBanner",
        onReandr:function(v){
            v.find(".swiper-container").swiper({
                autoplayDisableOnInteraction:false,
                loop : true,
                autoplay:1500
            });
        },
        cssStyle:{
            color:'white',
            'background-color':'#e64340',
            'border-radius': '0px',
            width:'100%',
            height:'200px'
        }
    };
    $.common.commons.baseCommons.addItem(imgBannerCommons);

}(window.jQuery);!function($){
    var dataList={
        icon:'icon-liebiao-copy',
        lable:'列表',
        type:'dataList',
        template:' <div class="weui-panel weui-panel_access  commons-dataList commons">'+
                            '<div class="weui-panel__bd">'+
                                '{{#each data}}'+
                                    '<span class="weui-media-box weui-media-box_appmsg">'+
                                     ' <div class="weui-media-box__hd">'+
                                         '<img class="weui-media-box__thumb" src="{{imgUrl}}">'+
                                      '</div>'+
                                    '<div class="weui-media-box__bd">'+
                                       '<h4 class="weui-media-box__title">{{title}}</h4>'+
                                        '<p class="weui-media-box__desc">{{text}}</p>'+
                                    '</div>'+
                                   '</span>'+
                                '{{/each}}'+
                        '</div>'+
                   '</div>',
        data:[
            {
            imgUrl:'http://icon.nipic.com/BannerPic/20170511/original/20170511102754_1.jpg',
            title:'标题',
            text:'我是简介',
            },
            {
                imgUrl:'http://icon.nipic.com/BannerPic/20170511/original/20170511102754_1.jpg',
                title:'标题',
                text:'我是简介',
            },
            {
                imgUrl:'http://icon.nipic.com/BannerPic/20170511/original/20170511102754_1.jpg',
                title:'标题',
                text:'我是简介',
            }
        ],
        cssStyle:{
        }
    }
    $.common.commons.baseCommons.addItem(dataList);
}(window.jQuery);

!function($){
    var video={
        icon:'icon-shipin',
        lable:'视频',
        type:'video',
        template:' <div class="commons-video commons " >'+
                    '{{{videoUrl}}}'+
                    '</div>',
            videoUrl:"<iframe height=498 width=510 src='http://player.youku.com/embed/XMjgzNjcxNDA3Ng==' frameborder=0 'allowfullscreen'></iframe>",
        cssStyle:{
            height:'200px','background-color': '#B3B3B3'
        }
    };
    $.common.commons.baseCommons.addItem(video);
}(window.jQuery);
!function($){
    var frequency={
        icon:'icon-yinpin',
        lable:'音频',
        template:' <div class="vcenter" ><img class="commons-img commons " src="{{{imgUrl}}}"/></div>',
        imgUrl:'http://uploads.xuexila.com/allimg/1611/764-16111Q02U9.jpg',
        cssStyle:{
            color:'white',
            'font-size':'14px',
            'background-color':'#e64340',
            'border-radius': '0px',
            width:'100%',height:'100px'
        }
    };
    alert(JSON.stringify($.common.commons.otherCommons));
    $.common.commons.otherCommons.addItem(frequency);
}(window.jQuery);!function($){
  var common=function(){
  };
  common.prototype.confg={
    baseTemplae:'  <div class="control-wrap">'+
        '<span  class="move-handle">'+
            '<i ></i>'+
            '<i ></i>'+
            '<i ></i>'+
        '</span>'+
        '<span class="ele-delete-icon" title="删除">×</span>'+
      '</div>'
  }
  common.prototype.commons={
    baseCommons:{
      addItem:function(v){
        this.items.push(v);
      },
      items:[],
      el:'#baseCommons'
    },
    weightCommons:{
      addItem:function(v){
        this.items.push(v);
      },
      items:[],
      el:'#weightCommons'
    },
    otherCommons:{
      addItem:function(v){
          alert(JSON.stringify(this));
        this.items.push(v);
      },
      items:[],
      el:'#otherCommons'
    }
  };
  common.prototype.init=function(){
      for(var i in this.commons){
          const o=this.commons[i];

          const panel=$(o.el);

          o.items.forEach(function(k){
              const html=$("<li class='draggable' > "+
                      "<div class='handle'>"+
                      "<i class='icon-container iconfont "+k.icon+"'></i> "+
                      "<span>"+k.lable+"</span> "+
                      "</div>"+
                      "</li>");

            html.data("params",k);
            panel.append(html);
      });
    };
  $( ".draggable" ).draggable({
        cursor: "move",
        handle:'.handle',
        connectToSortable: ".droppable",
        opacity: 0.7,
        appendTo:'body',
        helper: function( e,u ) {
          var target=$(e.target);
          if(target.is(".icon-container") || target.is("span")){
            target=target.parent() ;
          }

          var panel=$( "<div class='ui-widget-header'><div class='ui-widget-header-container'>"+target.html()+"</div></div>");
          panel.data("params",target.parent().data("params"));
          return panel;
        },
        revert: false
    });

    $( ".droppable" ).sortable({
      revert: false,
      axis:'y',
      appendTo:'body',
      cursor:'move',
      handle:".move-handle",
      tolerance:"intersect",
      beforeStop:function(e,u,h,i){
        var type="";
        if($(u.item).is(".ui-widget-header")){
            var header=$($(".app-wrap").find(".ui-widget-header")[0]);
            var data=header.data("params");
            header.css({width:"100%",height:'initial'});
            var soure=$.common.confg.baseTemplae+data.template;
            var templ=Handlebars.compile(soure);
            var commons=$(templ(data));
            header.html(commons);
            header.find(".commons").css(data.cssStyle);
            $(".app-wrap .commons-warp.select").removeClass("select");
            header.removeClass("ui-widget-header").addClass("commons-warp").addClass("select");
            if(data.onReandr){
              data.onReandr(header);
          }
        }
      },
      placeholder: "ui-state-highlight"
    });
  };
   $.extend({
     common:new common()
   });
   Handlebars.registerHelper("getImgHeightForImgList",function(size, column,height) {

           height=parseInt(height.replace("px",''));
           var row=Math.ceil(size/column)
           return (height/row)+"px";
       });
       Handlebars.registerHelper("getFloatWidth",function(column) {
           return 100/column;
       });
}(window.jQuery);
!function($){
 var lableCommon={
  icon:'icon-biaoti',
  lable:'标题',
  type:'title',
  template:'<label class="commons-lable commons" > {{text}} </lable>',
  text:'请输入标题内容',
  cssStyle:{
    color:'black',
    'font-size':'14px',
    'background-color':'#f0f0f0',
    height:'28px'
  }
}
$.common.commons.baseCommons.addItem(lableCommon);
}(window.jQuery);
!function($){
  var titleCommons={
      icon:'icon-wenben',
      lable:'文本',
      template:'<div>'+
                '<span class="commons-title commons vcenter"> {{text}}</span>'+
               '</div>',
      text:'请输入文本内容',
      type:"label",
      cssStyle:{
        color:'black',
        'font-size':'12px',
        'text-align':'left'
      }
    };
$.common.commons.baseCommons.addItem(titleCommons);

}(window.jQuery);
!function($){
var button={
  icon:'icon-anniu',
  lable:'按钮',
  type:'button',
  template:'  <div style="background:white">'+
              '<a href="javascript:;" class="weui-btn weui-btn_warn commons-button commons">{{text}}</a>'+
           '</div>',
  text:'按钮',
  cssStyle:{
    color:'white',
    'font-size':'14px',
    'background-color':'#e64340',
    'border-radius': '0px',
    width:'100px',
    height:'35px'
  }
};
  $.common.commons.baseCommons.addItem(button);
}(window.jQuery);
!function($){
    var img={
        icon:'icon-tupian',
        lable:'图片',
        type:'img',
        template:' <div class="vcenter" ><img class="commons-img commons " src="{{{imgUrl}}}"/></div>',
        imgUrl:'http://uploads.xuexila.com/allimg/1611/764-16111Q02U9.jpg',
        cssStyle:{
            color:'white',
            'font-size':'14px',
            'background-color':'#e64340',
            'border-radius': '0px',
            width:'100%',height:'100px'
        }
    };
    $.common.commons.baseCommons.addItem(img);
}(window.jQuery);

!function($){
    var imgList={
        icon:'icon-uipiclist',
        lable:'图片列表',
        type:'imgList',
        column:3,
        template:'<div class="commons-imgList commons">'+
                '{{#each data }}'+
                '<div style="width:{{getFloatWidth ../column}}%;height:{{getImgHeightForImgList ../data.length ../column ../cssStyle.height}}" class="item">'+
                '<img  src="{{imgUrl}}">'+
                '<span class="title">{{title}}</span>'+
                '</div>'+
                '{{/each}}'+
                '</div>',
        data:[
            {imgUrl:'http://i02.pictn.sogoucdn.com/9e6f1d432aaa9aab',title:'图片一'},
            {imgUrl:'http://i02.pictn.sogoucdn.com/30a2e0e0da6f35a0',title:'图片二'},
            {imgUrl:'http://img.19yxw.com/wy/update/2015818/201581812562060364.jpg',title:'图片三'},
            {imgUrl:'http://i01.pic.sogou.com/0f3689382065243d',title:'图片四'},
            {imgUrl:'http://i01.pictn.sogoucdn.com/9c760130c16601d3',title:'图片五'},
            {imgUrl:'http://i01.pictn.sogoucdn.com/9c760130c16601d3',title:'图片六'}
            ],
        cssStyle:{
            color:'white',
            'font-size':'14px',
            'background-color':'white',
            'border-radius': '0px',
            height:'200px'
        }
    };
    $.common.commons.baseCommons.addItem(imgList);
}(window.jQuery);

!function($){
    var classify={
        icon:'icon-fenlei',
        lable:'分类',
        type:'classify',
        template:
        '<div class="commons-classify commons swiper-container weui-navbar ">'
           + '{{#each data}}'
            +'<div class="weui-navbar__item vcenter">{{this.value}}</div>'+
          '{{/each}}'+
        '</div>',
        data:[
            {value:'分类一'},
            {value:'分类二'},
            {value:'分类三'},
            {value:'分类四'},
        ],
        cssStyle:{
            color:'#908a8a',
            'background-color':'rgb(226, 224, 221)',
            width:'100%',
            height:'30px'
        }
    };
    $.common.commons.baseCommons.addItem(classify);
}(window.jQuery);
!function($){
    var imgBannerCommons={
        icon:'icon-lunbozutu',
        lable:'图片轮播',
        template:
        '<div class="swiper-container  commons-imgBanner commons">'
            + '<div class="swiper-wrapper">'
                    + '{{#each data}}'
                        + '<div class="swiper-slide">'+'<img src="{{this.imgUrl}}" alt=""/>'+'</div>'
                    + '{{/each}}'+
            + '</div>'+

        '</div>',
        data:[
            {imgUrl:'/wei/img/swiper-1.jpg'},
            {imgUrl:'/wei/img/swiper-2.jpg'},
            {imgUrl:'/wei/img/swiper-3.jpg'},
        ],
        type:"imgBanner",
        onReandr:function(v){
            v.find(".swiper-container").swiper({
                autoplayDisableOnInteraction:false,
                loop : true,
                autoplay:1500
            });
        },
        cssStyle:{
            color:'white',
            'background-color':'#e64340',
            'border-radius': '0px',
            width:'100%',
            height:'200px'
        }
    };
    $.common.commons.baseCommons.addItem(imgBannerCommons);

}(window.jQuery);!function($){
    var dataList={
        icon:'icon-liebiao-copy',
        lable:'列表',
        type:'dataList',
        template:' <div class="weui-panel weui-panel_access  commons-dataList commons">'+
                            '<div class="weui-panel__bd">'+
                                '{{#each data}}'+
                                    '<span class="weui-media-box weui-media-box_appmsg">'+
                                     ' <div class="weui-media-box__hd">'+
                                         '<img class="weui-media-box__thumb" src="{{imgUrl}}">'+
                                      '</div>'+
                                    '<div class="weui-media-box__bd">'+
                                       '<h4 class="weui-media-box__title">{{title}}</h4>'+
                                        '<p class="weui-media-box__desc">{{text}}</p>'+
                                    '</div>'+
                                   '</span>'+
                                '{{/each}}'+
                        '</div>'+
                   '</div>',
        data:[
            {
            imgUrl:'http://icon.nipic.com/BannerPic/20170511/original/20170511102754_1.jpg',
            title:'标题',
            text:'我是简介',
            },
            {
                imgUrl:'http://icon.nipic.com/BannerPic/20170511/original/20170511102754_1.jpg',
                title:'标题',
                text:'我是简介',
            },
            {
                imgUrl:'http://icon.nipic.com/BannerPic/20170511/original/20170511102754_1.jpg',
                title:'标题',
                text:'我是简介',
            }
        ],
        cssStyle:{
        }
    }
    $.common.commons.baseCommons.addItem(dataList);
}(window.jQuery);

!function($){
    var video={
        icon:'icon-shipin',
        lable:'视频',
        type:'video',
        template:' <div class="commons-video commons " >'+
                    '{{{videoUrl}}}'+
                    '</div>',
            videoUrl:"<iframe height=498 width=510 src='http://player.youku.com/embed/XMjgzNjcxNDA3Ng==' frameborder=0 'allowfullscreen'></iframe>",
        cssStyle:{
            height:'200px','background-color': '#B3B3B3'
        }
    };
    $.common.commons.baseCommons.addItem(video);
}(window.jQuery);
!function($){
    var frequency={
        icon:'icon-yinpin',
        lable:'音频',
        template:' <div class="vcenter" ><img class="commons-img commons " src="{{{imgUrl}}}"/></div>',
        imgUrl:'http://uploads.xuexila.com/allimg/1611/764-16111Q02U9.jpg',
        cssStyle:{
            color:'white',
            'font-size':'14px',
            'background-color':'#e64340',
            'border-radius': '0px',
            width:'100%',height:'100px'
        }
    };
    alert(JSON.stringify($.common.commons.otherCommons));
    $.common.commons.otherCommons.addItem(frequency);
}(window.jQuery);!function($){
  var common=function(){
  };
  common.prototype.confg={
    baseTemplae:'  <div class="control-wrap">'+
        '<span  class="move-handle">'+
            '<i ></i>'+
            '<i ></i>'+
            '<i ></i>'+
        '</span>'+
        '<span class="ele-delete-icon" title="删除">×</span>'+
      '</div>'
  }
  common.prototype.commons={
    baseCommons:{
      addItem:function(v){
        this.items.push(v);
      },
      items:[],
      el:'#baseCommons'
    },
    weightCommons:{
      addItem:function(v){
        this.items.push(v);
      },
      items:[],
      el:'#weightCommons'
    },
    otherCommons:{
      addItem:function(v){
          alert(JSON.stringify(this));
        this.items.push(v);
      },
      items:[],
      el:'#otherCommons'
    }
  };
  common.prototype.init=function(){
      for(var i in this.commons){
          const o=this.commons[i];

          const panel=$(o.el);

          o.items.forEach(function(k){
              const html=$("<li class='draggable' > "+
                      "<div class='handle'>"+
                      "<i class='icon-container iconfont "+k.icon+"'></i> "+
                      "<span>"+k.lable+"</span> "+
                      "</div>"+
                      "</li>");

            html.data("params",k);
            panel.append(html);
      });
    };
  $( ".draggable" ).draggable({
        cursor: "move",
        handle:'.handle',
        connectToSortable: ".droppable",
        opacity: 0.7,
        appendTo:'body',
        helper: function( e,u ) {
          var target=$(e.target);
          if(target.is(".icon-container") || target.is("span")){
            target=target.parent() ;
          }

          var panel=$( "<div class='ui-widget-header'><div class='ui-widget-header-container'>"+target.html()+"</div></div>");
          panel.data("params",target.parent().data("params"));
          return panel;
        },
        revert: false
    });

    $( ".droppable" ).sortable({
      revert: false,
      axis:'y',
      appendTo:'body',
      cursor:'move',
      handle:".move-handle",
      tolerance:"intersect",
      beforeStop:function(e,u,h,i){
        var type="";
        if($(u.item).is(".ui-widget-header")){
            var header=$($(".app-wrap").find(".ui-widget-header")[0]);
            var data=header.data("params");
            header.css({width:"100%",height:'initial'});
            var soure=$.common.confg.baseTemplae+data.template;
            var templ=Handlebars.compile(soure);
            var commons=$(templ(data));
            header.html(commons);
            header.find(".commons").css(data.cssStyle);
            $(".app-wrap .commons-warp.select").removeClass("select");
            header.removeClass("ui-widget-header").addClass("commons-warp").addClass("select");
            if(data.onReandr){
              data.onReandr(header);
          }
        }
      },
      placeholder: "ui-state-highlight"
    });
  };
   $.extend({
     common:new common()
   });
   Handlebars.registerHelper("getImgHeightForImgList",function(size, column,height) {

           height=parseInt(height.replace("px",''));
           var row=Math.ceil(size/column)
           return (height/row)+"px";
       });
       Handlebars.registerHelper("getFloatWidth",function(column) {
           return 100/column;
       });
}(window.jQuery);
!function($){
 var lableCommon={
  icon:'icon-biaoti',
  lable:'标题',
  type:'title',
  template:'<label class="commons-lable commons" > {{text}} </lable>',
  text:'请输入标题内容',
  cssStyle:{
    color:'black',
    'font-size':'14px',
    'background-color':'#f0f0f0',
    height:'28px'
  }
}
$.common.commons.baseCommons.addItem(lableCommon);
}(window.jQuery);
!function($){
  var titleCommons={
      icon:'icon-wenben',
      lable:'文本',
      template:'<div>'+
                '<span class="commons-title commons vcenter"> {{text}}</span>'+
               '</div>',
      text:'请输入文本内容',
      type:"label",
      cssStyle:{
        color:'black',
        'font-size':'12px',
        'text-align':'left'
      }
    };
$.common.commons.baseCommons.addItem(titleCommons);

}(window.jQuery);
!function($){
var button={
  icon:'icon-anniu',
  lable:'按钮',
  type:'button',
  template:'  <div style="background:white">'+
              '<a href="javascript:;" class="weui-btn weui-btn_warn commons-button commons">{{text}}</a>'+
           '</div>',
  text:'按钮',
  cssStyle:{
    color:'white',
    'font-size':'14px',
    'background-color':'#e64340',
    'border-radius': '0px',
    width:'100px',
    height:'35px'
  }
};
  $.common.commons.baseCommons.addItem(button);
}(window.jQuery);
!function($){
    var img={
        icon:'icon-tupian',
        lable:'图片',
        type:'img',
        template:' <div class="vcenter" ><img class="commons-img commons " src="{{{imgUrl}}}"/></div>',
        imgUrl:'http://uploads.xuexila.com/allimg/1611/764-16111Q02U9.jpg',
        cssStyle:{
            color:'white',
            'font-size':'14px',
            'background-color':'#e64340',
            'border-radius': '0px',
            width:'100%',height:'100px'
        }
    };
    $.common.commons.baseCommons.addItem(img);
}(window.jQuery);

!function($){
    var imgList={
        icon:'icon-uipiclist',
        lable:'图片列表',
        type:'imgList',
        column:3,
        template:'<div class="commons-imgList commons">'+
                '{{#each data }}'+
                '<div style="width:{{getFloatWidth ../column}}%;height:{{getImgHeightForImgList ../data.length ../column ../cssStyle.height}}" class="item">'+
                '<img  src="{{imgUrl}}">'+
                '<span class="title">{{title}}</span>'+
                '</div>'+
                '{{/each}}'+
                '</div>',
        data:[
            {imgUrl:'http://i02.pictn.sogoucdn.com/9e6f1d432aaa9aab',title:'图片一'},
            {imgUrl:'http://i02.pictn.sogoucdn.com/30a2e0e0da6f35a0',title:'图片二'},
            {imgUrl:'http://img.19yxw.com/wy/update/2015818/201581812562060364.jpg',title:'图片三'},
            {imgUrl:'http://i01.pic.sogou.com/0f3689382065243d',title:'图片四'},
            {imgUrl:'http://i01.pictn.sogoucdn.com/9c760130c16601d3',title:'图片五'},
            {imgUrl:'http://i01.pictn.sogoucdn.com/9c760130c16601d3',title:'图片六'}
            ],
        cssStyle:{
            color:'white',
            'font-size':'14px',
            'background-color':'white',
            'border-radius': '0px',
            height:'200px'
        }
    };
    $.common.commons.baseCommons.addItem(imgList);
}(window.jQuery);

!function($){
    var classify={
        icon:'icon-fenlei',
        lable:'分类',
        type:'classify',
        template:
        '<div class="commons-classify commons swiper-container weui-navbar ">'
           + '{{#each data}}'
            +'<div class="weui-navbar__item vcenter">{{this.value}}</div>'+
          '{{/each}}'+
        '</div>',
        data:[
            {value:'分类一'},
            {value:'分类二'},
            {value:'分类三'},
            {value:'分类四'},
        ],
        cssStyle:{
            color:'#908a8a',
            'background-color':'rgb(226, 224, 221)',
            width:'100%',
            height:'30px'
        }
    };
    $.common.commons.baseCommons.addItem(classify);
}(window.jQuery);
!function($){
    var imgBannerCommons={
        icon:'icon-lunbozutu',
        lable:'图片轮播',
        template:
        '<div class="swiper-container  commons-imgBanner commons">'
            + '<div class="swiper-wrapper">'
                    + '{{#each data}}'
                        + '<div class="swiper-slide">'+'<img src="{{this.imgUrl}}" alt=""/>'+'</div>'
                    + '{{/each}}'+
            + '</div>'+

        '</div>',
        data:[
            {imgUrl:'/wei/img/swiper-1.jpg'},
            {imgUrl:'/wei/img/swiper-2.jpg'},
            {imgUrl:'/wei/img/swiper-3.jpg'},
        ],
        type:"imgBanner",
        onReandr:function(v){
            v.find(".swiper-container").swiper({
                autoplayDisableOnInteraction:false,
                loop : true,
                autoplay:1500
            });
        },
        cssStyle:{
            color:'white',
            'background-color':'#e64340',
            'border-radius': '0px',
            width:'100%',
            height:'200px'
        }
    };
    $.common.commons.baseCommons.addItem(imgBannerCommons);

}(window.jQuery);!function($){
    var dataList={
        icon:'icon-liebiao-copy',
        lable:'列表',
        type:'dataList',
        template:' <div class="weui-panel weui-panel_access  commons-dataList commons">'+
                            '<div class="weui-panel__bd">'+
                                '{{#each data}}'+
                                    '<span class="weui-media-box weui-media-box_appmsg">'+
                                     ' <div class="weui-media-box__hd">'+
                                         '<img class="weui-media-box__thumb" src="{{imgUrl}}">'+
                                      '</div>'+
                                    '<div class="weui-media-box__bd">'+
                                       '<h4 class="weui-media-box__title">{{title}}</h4>'+
                                        '<p class="weui-media-box__desc">{{text}}</p>'+
                                    '</div>'+
                                   '</span>'+
                                '{{/each}}'+
                        '</div>'+
                   '</div>',
        data:[
            {
            imgUrl:'http://icon.nipic.com/BannerPic/20170511/original/20170511102754_1.jpg',
            title:'标题',
            text:'我是简介',
            },
            {
                imgUrl:'http://icon.nipic.com/BannerPic/20170511/original/20170511102754_1.jpg',
                title:'标题',
                text:'我是简介',
            },
            {
                imgUrl:'http://icon.nipic.com/BannerPic/20170511/original/20170511102754_1.jpg',
                title:'标题',
                text:'我是简介',
            }
        ],
        cssStyle:{
        }
    }
    $.common.commons.baseCommons.addItem(dataList);
}(window.jQuery);

!function($){
    var video={
        icon:'icon-shipin',
        lable:'视频',
        type:'video',
        template:' <div class="commons-video commons " >'+
                    '{{{videoUrl}}}'+
                    '</div>',
            videoUrl:"<iframe height=498 width=510 src='http://player.youku.com/embed/XMjgzNjcxNDA3Ng==' frameborder=0 'allowfullscreen'></iframe>",
        cssStyle:{
            height:'200px','background-color': '#B3B3B3'
        }
    };
    $.common.commons.baseCommons.addItem(video);
}(window.jQuery);
!function($){
    var frequency={
        icon:'icon-yinpin',
        lable:'音频',
        template:' <div class="vcenter" ><img class="commons-img commons " src="{{{imgUrl}}}"/></div>',
        imgUrl:'http://uploads.xuexila.com/allimg/1611/764-16111Q02U9.jpg',
        cssStyle:{
            color:'white',
            'font-size':'14px',
            'background-color':'#e64340',
            'border-radius': '0px',
            width:'100%',height:'100px'
        }
    };
    alert(JSON.stringify($.common.commons.otherCommons));
    $.common.commons.otherCommons.addItem(frequency);
}(window.jQuery);!function($){
  var common=function(){
  };
  common.prototype.confg={
    baseTemplae:'  <div class="control-wrap">'+
        '<span  class="move-handle">'+
            '<i ></i>'+
            '<i ></i>'+
            '<i ></i>'+
        '</span>'+
        '<span class="ele-delete-icon" title="删除">×</span>'+
      '</div>'
  }
  common.prototype.commons={
    baseCommons:{
      addItem:function(v){
        this.items.push(v);
      },
      items:[],
      el:'#baseCommons'
    },
    weightCommons:{
      addItem:function(v){
        this.items.push(v);
      },
      items:[],
      el:'#weightCommons'
    },
    otherCommons:{
      addItem:function(v){
          alert(JSON.stringify(this));
        this.items.push(v);
      },
      items:[],
      el:'#otherCommons'
    }
  };
  common.prototype.init=function(){
      for(var i in this.commons){
          const o=this.commons[i];

          const panel=$(o.el);

          o.items.forEach(function(k){
              const html=$("<li class='draggable' > "+
                      "<div class='handle'>"+
                      "<i class='icon-container iconfont "+k.icon+"'></i> "+
                      "<span>"+k.lable+"</span> "+
                      "</div>"+
                      "</li>");

            html.data("params",k);
            panel.append(html);
      });
    };
  $( ".draggable" ).draggable({
        cursor: "move",
        handle:'.handle',
        connectToSortable: ".droppable",
        opacity: 0.7,
        appendTo:'body',
        helper: function( e,u ) {
          var target=$(e.target);
          if(target.is(".icon-container") || target.is("span")){
            target=target.parent() ;
          }

          var panel=$( "<div class='ui-widget-header'><div class='ui-widget-header-container'>"+target.html()+"</div></div>");
          panel.data("params",target.parent().data("params"));
          return panel;
        },
        revert: false
    });

    $( ".droppable" ).sortable({
      revert: false,
      axis:'y',
      appendTo:'body',
      cursor:'move',
      handle:".move-handle",
      tolerance:"intersect",
      beforeStop:function(e,u,h,i){
        var type="";
        if($(u.item).is(".ui-widget-header")){
            var header=$($(".app-wrap").find(".ui-widget-header")[0]);
            var data=header.data("params");
            header.css({width:"100%",height:'initial'});
            var soure=$.common.confg.baseTemplae+data.template;
            var templ=Handlebars.compile(soure);
            var commons=$(templ(data));
            header.html(commons);
            header.find(".commons").css(data.cssStyle);
            $(".app-wrap .commons-warp.select").removeClass("select");
            header.removeClass("ui-widget-header").addClass("commons-warp").addClass("select");
            if(data.onReandr){
              data.onReandr(header);
          }
        }
      },
      placeholder: "ui-state-highlight"
    });
  };
   $.extend({
     common:new common()
   });
   Handlebars.registerHelper("getImgHeightForImgList",function(size, column,height) {

           height=parseInt(height.replace("px",''));
           var row=Math.ceil(size/column)
           return (height/row)+"px";
       });
       Handlebars.registerHelper("getFloatWidth",function(column) {
           return 100/column;
       });
}(window.jQuery);
!function($){
 var lableCommon={
  icon:'icon-biaoti',
  lable:'标题',
  type:'title',
  template:'<label class="commons-lable commons" > {{text}} </lable>',
  text:'请输入标题内容',
  cssStyle:{
    color:'black',
    'font-size':'14px',
    'background-color':'#f0f0f0',
    height:'28px'
  }
}
$.common.commons.baseCommons.addItem(lableCommon);
}(window.jQuery);
!function($){
  var titleCommons={
      icon:'icon-wenben',
      lable:'文本',
      template:'<div>'+
                '<span class="commons-title commons vcenter"> {{text}}</span>'+
               '</div>',
      text:'请输入文本内容',
      type:"label",
      cssStyle:{
        color:'black',
        'font-size':'12px',
        'text-align':'left'
      }
    };
$.common.commons.baseCommons.addItem(titleCommons);

}(window.jQuery);
!function($){
var button={
  icon:'icon-anniu',
  lable:'按钮',
  type:'button',
  template:'  <div style="background:white">'+
              '<a href="javascript:;" class="weui-btn weui-btn_warn commons-button commons">{{text}}</a>'+
           '</div>',
  text:'按钮',
  cssStyle:{
    color:'white',
    'font-size':'14px',
    'background-color':'#e64340',
    'border-radius': '0px',
    width:'100px',
    height:'35px'
  }
};
  $.common.commons.baseCommons.addItem(button);
}(window.jQuery);
!function($){
    var img={
        icon:'icon-tupian',
        lable:'图片',
        type:'img',
        template:' <div class="vcenter" ><img class="commons-img commons " src="{{{imgUrl}}}"/></div>',
        imgUrl:'http://uploads.xuexila.com/allimg/1611/764-16111Q02U9.jpg',
        cssStyle:{
            color:'white',
            'font-size':'14px',
            'background-color':'#e64340',
            'border-radius': '0px',
            width:'100%',height:'100px'
        }
    };
    $.common.commons.baseCommons.addItem(img);
}(window.jQuery);

!function($){
    var imgList={
        icon:'icon-uipiclist',
        lable:'图片列表',
        type:'imgList',
        column:3,
        template:'<div class="commons-imgList commons">'+
                '{{#each data }}'+
                '<div style="width:{{getFloatWidth ../column}}%;height:{{getImgHeightForImgList ../data.length ../column ../cssStyle.height}}" class="item">'+
                '<img  src="{{imgUrl}}">'+
                '<span class="title">{{title}}</span>'+
                '</div>'+
                '{{/each}}'+
                '</div>',
        data:[
            {imgUrl:'http://i02.pictn.sogoucdn.com/9e6f1d432aaa9aab',title:'图片一'},
            {imgUrl:'http://i02.pictn.sogoucdn.com/30a2e0e0da6f35a0',title:'图片二'},
            {imgUrl:'http://img.19yxw.com/wy/update/2015818/201581812562060364.jpg',title:'图片三'},
            {imgUrl:'http://i01.pic.sogou.com/0f3689382065243d',title:'图片四'},
            {imgUrl:'http://i01.pictn.sogoucdn.com/9c760130c16601d3',title:'图片五'},
            {imgUrl:'http://i01.pictn.sogoucdn.com/9c760130c16601d3',title:'图片六'}
            ],
        cssStyle:{
            color:'white',
            'font-size':'14px',
            'background-color':'white',
            'border-radius': '0px',
            height:'200px'
        }
    };
    $.common.commons.baseCommons.addItem(imgList);
}(window.jQuery);

!function($){
    var classify={
        icon:'icon-fenlei',
        lable:'分类',
        type:'classify',
        template:
        '<div class="commons-classify commons swiper-container weui-navbar ">'
           + '{{#each data}}'
            +'<div class="weui-navbar__item vcenter">{{this.value}}</div>'+
          '{{/each}}'+
        '</div>',
        data:[
            {value:'分类一'},
            {value:'分类二'},
            {value:'分类三'},
            {value:'分类四'},
        ],
        cssStyle:{
            color:'#908a8a',
            'background-color':'rgb(226, 224, 221)',
            width:'100%',
            height:'30px'
        }
    };
    $.common.commons.baseCommons.addItem(classify);
}(window.jQuery);
!function($){
    var imgBannerCommons={
        icon:'icon-lunbozutu',
        lable:'图片轮播',
        template:
        '<div class="swiper-container  commons-imgBanner commons">'
            + '<div class="swiper-wrapper">'
                    + '{{#each data}}'
                        + '<div class="swiper-slide">'+'<img src="{{this.imgUrl}}" alt=""/>'+'</div>'
                    + '{{/each}}'+
            + '</div>'+

        '</div>',
        data:[
            {imgUrl:'/wei/img/swiper-1.jpg'},
            {imgUrl:'/wei/img/swiper-2.jpg'},
            {imgUrl:'/wei/img/swiper-3.jpg'},
        ],
        type:"imgBanner",
        onReandr:function(v){
            v.find(".swiper-container").swiper({
                autoplayDisableOnInteraction:false,
                loop : true,
                autoplay:1500
            });
        },
        cssStyle:{
            color:'white',
            'background-color':'#e64340',
            'border-radius': '0px',
            width:'100%',
            height:'200px'
        }
    };
    $.common.commons.baseCommons.addItem(imgBannerCommons);

}(window.jQuery);!function($){
    var dataList={
        icon:'icon-liebiao-copy',
        lable:'列表',
        type:'dataList',
        template:' <div class="weui-panel weui-panel_access  commons-dataList commons">'+
                            '<div class="weui-panel__bd">'+
                                '{{#each data}}'+
                                    '<span class="weui-media-box weui-media-box_appmsg">'+
                                     ' <div class="weui-media-box__hd">'+
                                         '<img class="weui-media-box__thumb" src="{{imgUrl}}">'+
                                      '</div>'+
                                    '<div class="weui-media-box__bd">'+
                                       '<h4 class="weui-media-box__title">{{title}}</h4>'+
                                        '<p class="weui-media-box__desc">{{text}}</p>'+
                                    '</div>'+
                                   '</span>'+
                                '{{/each}}'+
                        '</div>'+
                   '</div>',
        data:[
            {
            imgUrl:'http://icon.nipic.com/BannerPic/20170511/original/20170511102754_1.jpg',
            title:'标题',
            text:'我是简介',
            },
            {
                imgUrl:'http://icon.nipic.com/BannerPic/20170511/original/20170511102754_1.jpg',
                title:'标题',
                text:'我是简介',
            },
            {
                imgUrl:'http://icon.nipic.com/BannerPic/20170511/original/20170511102754_1.jpg',
                title:'标题',
                text:'我是简介',
            }
        ],
        cssStyle:{
        }
    }
    $.common.commons.baseCommons.addItem(dataList);
}(window.jQuery);

!function($){
    var video={
        icon:'icon-shipin',
        lable:'视频',
        type:'video',
        template:' <div class="commons-video commons " >'+
                    '{{{videoUrl}}}'+
                    '</div>',
            videoUrl:"<iframe height=498 width=510 src='http://player.youku.com/embed/XMjgzNjcxNDA3Ng==' frameborder=0 'allowfullscreen'></iframe>",
        cssStyle:{
            height:'200px','background-color': '#B3B3B3'
        }
    };
    $.common.commons.baseCommons.addItem(video);
}(window.jQuery);
!function($){
    var music={
        icon:'icon-yinpin',
        lable:'音频',
        template:' <div class="vcenter" ><img class="commons-img commons " src="{{{imgUrl}}}"/></div>',
        imgUrl:'http://uploads.xuexila.com/allimg/1611/764-16111Q02U9.jpg',
        cssStyle:{
            color:'white',
            'font-size':'14px',
            'background-color':'#e64340',
            'border-radius': '0px',
            width:'100%',height:'100px'
        }
    };
    alert(JSON.stringify($.common.commons.otherCommons));
    $.common.commons.otherCommons.addItem(music);
}(window.jQuery);!function($){
  var common=function(){
  };
  common.prototype.confg={
    baseTemplae:'  <div class="control-wrap">'+
        '<span  class="move-handle">'+
            '<i ></i>'+
            '<i ></i>'+
            '<i ></i>'+
        '</span>'+
        '<span class="ele-delete-icon" title="删除">×</span>'+
      '</div>'
  }
  common.prototype.commons={
    baseCommons:{
      addItem:function(v){
        this.items.push(v);
      },
      items:[],
      el:'#baseCommons'
    },
    weightCommons:{
      addItem:function(v){
        this.items.push(v);
      },
      items:[],
      el:'#weightCommons'
    },
    otherCommons:{
      addItem:function(v){
          alert(JSON.stringify(this));
        this.items.push(v);
      },
      items:[],
      el:'#otherCommons'
    }
  };
  common.prototype.init=function(){
      for(var i in this.commons){
          const o=this.commons[i];

          const panel=$(o.el);

          o.items.forEach(function(k){
              const html=$("<li class='draggable' > "+
                      "<div class='handle'>"+
                      "<i class='icon-container iconfont "+k.icon+"'></i> "+
                      "<span>"+k.lable+"</span> "+
                      "</div>"+
                      "</li>");

            html.data("params",k);
            panel.append(html);
      });
    };
  $( ".draggable" ).draggable({
        cursor: "move",
        handle:'.handle',
        connectToSortable: ".droppable",
        opacity: 0.7,
        appendTo:'body',
        helper: function( e,u ) {
          var target=$(e.target);
          if(target.is(".icon-container") || target.is("span")){
            target=target.parent() ;
          }

          var panel=$( "<div class='ui-widget-header'><div class='ui-widget-header-container'>"+target.html()+"</div></div>");
          panel.data("params",target.parent().data("params"));
          return panel;
        },
        revert: false
    });

    $( ".droppable" ).sortable({
      revert: false,
      axis:'y',
      appendTo:'body',
      cursor:'move',
      handle:".move-handle",
      tolerance:"intersect",
      beforeStop:function(e,u,h,i){
        var type="";
        if($(u.item).is(".ui-widget-header")){
            var header=$($(".app-wrap").find(".ui-widget-header")[0]);
            var data=header.data("params");
            header.css({width:"100%",height:'initial'});
            var soure=$.common.confg.baseTemplae+data.template;
            var templ=Handlebars.compile(soure);
            var commons=$(templ(data));
            header.html(commons);
            header.find(".commons").css(data.cssStyle);
            $(".app-wrap .commons-warp.select").removeClass("select");
            header.removeClass("ui-widget-header").addClass("commons-warp").addClass("select");
            if(data.onReandr){
              data.onReandr(header);
          }
        }
      },
      placeholder: "ui-state-highlight"
    });
  };
   $.extend({
     common:new common()
   });
   Handlebars.registerHelper("getImgHeightForImgList",function(size, column,height) {

           height=parseInt(height.replace("px",''));
           var row=Math.ceil(size/column)
           return (height/row)+"px";
       });
       Handlebars.registerHelper("getFloatWidth",function(column) {
           return 100/column;
       });
}(window.jQuery);
!function($){
 var lableCommon={
  icon:'icon-biaoti',
  lable:'标题',
  type:'title',
  template:'<label class="commons-lable commons" > {{text}} </lable>',
  text:'请输入标题内容',
  cssStyle:{
    color:'black',
    'font-size':'14px',
    'background-color':'#f0f0f0',
    height:'28px'
  }
}
$.common.commons.baseCommons.addItem(lableCommon);
}(window.jQuery);
!function($){
  var titleCommons={
      icon:'icon-wenben',
      lable:'文本',
      template:'<div>'+
                '<span class="commons-title commons vcenter"> {{text}}</span>'+
               '</div>',
      text:'请输入文本内容',
      type:"label",
      cssStyle:{
        color:'black',
        'font-size':'12px',
        'text-align':'left'
      }
    };
$.common.commons.baseCommons.addItem(titleCommons);

}(window.jQuery);
!function($){
var button={
  icon:'icon-anniu',
  lable:'按钮',
  type:'button',
  template:'  <div style="background:white">'+
              '<a href="javascript:;" class="weui-btn weui-btn_warn commons-button commons">{{text}}</a>'+
           '</div>',
  text:'按钮',
  cssStyle:{
    color:'white',
    'font-size':'14px',
    'background-color':'#e64340',
    'border-radius': '0px',
    width:'100px',
    height:'35px'
  }
};
  $.common.commons.baseCommons.addItem(button);
}(window.jQuery);
!function($){
    var img={
        icon:'icon-tupian',
        lable:'图片',
        type:'img',
        template:' <div class="vcenter" ><img class="commons-img commons " src="{{{imgUrl}}}"/></div>',
        imgUrl:'http://uploads.xuexila.com/allimg/1611/764-16111Q02U9.jpg',
        cssStyle:{
            color:'white',
            'font-size':'14px',
            'background-color':'#e64340',
            'border-radius': '0px',
            width:'100%',height:'100px'
        }
    };
    $.common.commons.baseCommons.addItem(img);
}(window.jQuery);

!function($){
    var imgList={
        icon:'icon-uipiclist',
        lable:'图片列表',
        type:'imgList',
        column:3,
        template:'<div class="commons-imgList commons">'+
                '{{#each data }}'+
                '<div style="width:{{getFloatWidth ../column}}%;height:{{getImgHeightForImgList ../data.length ../column ../cssStyle.height}}" class="item">'+
                '<img  src="{{imgUrl}}">'+
                '<span class="title">{{title}}</span>'+
                '</div>'+
                '{{/each}}'+
                '</div>',
        data:[
            {imgUrl:'http://i02.pictn.sogoucdn.com/9e6f1d432aaa9aab',title:'图片一'},
            {imgUrl:'http://i02.pictn.sogoucdn.com/30a2e0e0da6f35a0',title:'图片二'},
            {imgUrl:'http://img.19yxw.com/wy/update/2015818/201581812562060364.jpg',title:'图片三'},
            {imgUrl:'http://i01.pic.sogou.com/0f3689382065243d',title:'图片四'},
            {imgUrl:'http://i01.pictn.sogoucdn.com/9c760130c16601d3',title:'图片五'},
            {imgUrl:'http://i01.pictn.sogoucdn.com/9c760130c16601d3',title:'图片六'}
            ],
        cssStyle:{
            color:'white',
            'font-size':'14px',
            'background-color':'white',
            'border-radius': '0px',
            height:'200px'
        }
    };
    $.common.commons.baseCommons.addItem(imgList);
}(window.jQuery);

!function($){
    var classify={
        icon:'icon-fenlei',
        lable:'分类',
        type:'classify',
        template:
        '<div class="commons-classify commons swiper-container weui-navbar ">'
           + '{{#each data}}'
            +'<div class="weui-navbar__item vcenter">{{this.value}}</div>'+
          '{{/each}}'+
        '</div>',
        data:[
            {value:'分类一'},
            {value:'分类二'},
            {value:'分类三'},
            {value:'分类四'},
        ],
        cssStyle:{
            color:'#908a8a',
            'background-color':'rgb(226, 224, 221)',
            width:'100%',
            height:'30px'
        }
    };
    $.common.commons.baseCommons.addItem(classify);
}(window.jQuery);
!function($){
    var imgBannerCommons={
        icon:'icon-lunbozutu',
        lable:'图片轮播',
        template:
        '<div class="swiper-container  commons-imgBanner commons">'
            + '<div class="swiper-wrapper">'
                    + '{{#each data}}'
                        + '<div class="swiper-slide">'+'<img src="{{this.imgUrl}}" alt=""/>'+'</div>'
                    + '{{/each}}'+
            + '</div>'+

        '</div>',
        data:[
            {imgUrl:'/wei/img/swiper-1.jpg'},
            {imgUrl:'/wei/img/swiper-2.jpg'},
            {imgUrl:'/wei/img/swiper-3.jpg'},
        ],
        type:"imgBanner",
        onReandr:function(v){
            v.find(".swiper-container").swiper({
                autoplayDisableOnInteraction:false,
                loop : true,
                autoplay:1500
            });
        },
        cssStyle:{
            color:'white',
            'background-color':'#e64340',
            'border-radius': '0px',
            width:'100%',
            height:'200px'
        }
    };
    $.common.commons.baseCommons.addItem(imgBannerCommons);

}(window.jQuery);!function($){
    var dataList={
        icon:'icon-liebiao-copy',
        lable:'列表',
        type:'dataList',
        template:' <div class="weui-panel weui-panel_access  commons-dataList commons">'+
                            '<div class="weui-panel__bd">'+
                                '{{#each data}}'+
                                    '<span class="weui-media-box weui-media-box_appmsg">'+
                                     ' <div class="weui-media-box__hd">'+
                                         '<img class="weui-media-box__thumb" src="{{imgUrl}}">'+
                                      '</div>'+
                                    '<div class="weui-media-box__bd">'+
                                       '<h4 class="weui-media-box__title">{{title}}</h4>'+
                                        '<p class="weui-media-box__desc">{{text}}</p>'+
                                    '</div>'+
                                   '</span>'+
                                '{{/each}}'+
                        '</div>'+
                   '</div>',
        data:[
            {
            imgUrl:'http://icon.nipic.com/BannerPic/20170511/original/20170511102754_1.jpg',
            title:'标题',
            text:'我是简介',
            },
            {
                imgUrl:'http://icon.nipic.com/BannerPic/20170511/original/20170511102754_1.jpg',
                title:'标题',
                text:'我是简介',
            },
            {
                imgUrl:'http://icon.nipic.com/BannerPic/20170511/original/20170511102754_1.jpg',
                title:'标题',
                text:'我是简介',
            }
        ],
        cssStyle:{
        }
    }
    $.common.commons.baseCommons.addItem(dataList);
}(window.jQuery);

!function($){
    var video={
        icon:'icon-shipin',
        lable:'视频',
        type:'video',
        template:' <div class="commons-video commons " >'+
                    '{{{videoUrl}}}'+
                    '</div>',
            videoUrl:"<iframe height=498 width=510 src='http://player.youku.com/embed/XMjgzNjcxNDA3Ng==' frameborder=0 'allowfullscreen'></iframe>",
        cssStyle:{
            height:'200px','background-color': '#B3B3B3'
        }
    };
    $.common.commons.baseCommons.addItem(video);
}(window.jQuery);
!function($){
    var music={
        icon:'icon-yinpin',
        lable:'音频',
        type:'music',
        template:' <div class="commons-music commons " >'+
        '{{{musicUrl}}}'+
        '</div>',
        videoUrl:"<iframe src='http://v.57dj.com/v/11130861/43ae33b2641630f38884b78f9a3f58ee.mp3' frameborder=0 'allowfullscreen'></iframe>",
        cssStyle:{
            height:'100px','background-color': '#B3B3B3'
        }
    };
    alert(JSON.stringify($.common.commons.otherCommons));
    $.common.commons.otherCommons.addItem(music);
}(window.jQuery);!function($){
  var common=function(){
  };
  common.prototype.confg={
    baseTemplae:'  <div class="control-wrap">'+
        '<span  class="move-handle">'+
            '<i ></i>'+
            '<i ></i>'+
            '<i ></i>'+
        '</span>'+
        '<span class="ele-delete-icon" title="删除">×</span>'+
      '</div>'
  }
  common.prototype.commons={
    baseCommons:{
      addItem:function(v){
        this.items.push(v);
      },
      items:[],
      el:'#baseCommons'
    },
    weightCommons:{
      addItem:function(v){
        this.items.push(v);
      },
      items:[],
      el:'#weightCommons'
    },
    otherCommons:{
      addItem:function(v){
          alert(JSON.stringify(this));
        this.items.push(v);
      },
      items:[],
      el:'#otherCommons'
    }
  };
  common.prototype.init=function(){
      for(var i in this.commons){
          const o=this.commons[i];

          const panel=$(o.el);

          o.items.forEach(function(k){
              const html=$("<li class='draggable' > "+
                      "<div class='handle'>"+
                      "<i class='icon-container iconfont "+k.icon+"'></i> "+
                      "<span>"+k.lable+"</span> "+
                      "</div>"+
                      "</li>");

            html.data("params",k);
            panel.append(html);
      });
    };
  $( ".draggable" ).draggable({
        cursor: "move",
        handle:'.handle',
        connectToSortable: ".droppable",
        opacity: 0.7,
        appendTo:'body',
        helper: function( e,u ) {
          var target=$(e.target);
          if(target.is(".icon-container") || target.is("span")){
            target=target.parent() ;
          }

          var panel=$( "<div class='ui-widget-header'><div class='ui-widget-header-container'>"+target.html()+"</div></div>");
          panel.data("params",target.parent().data("params"));
          return panel;
        },
        revert: false
    });

    $( ".droppable" ).sortable({
      revert: false,
      axis:'y',
      appendTo:'body',
      cursor:'move',
      handle:".move-handle",
      tolerance:"intersect",
      beforeStop:function(e,u,h,i){
        var type="";
        if($(u.item).is(".ui-widget-header")){
            var header=$($(".app-wrap").find(".ui-widget-header")[0]);
            var data=header.data("params");
            header.css({width:"100%",height:'initial'});
            var soure=$.common.confg.baseTemplae+data.template;
            var templ=Handlebars.compile(soure);
            var commons=$(templ(data));
            header.html(commons);
            header.find(".commons").css(data.cssStyle);
            $(".app-wrap .commons-warp.select").removeClass("select");
            header.removeClass("ui-widget-header").addClass("commons-warp").addClass("select");
            if(data.onReandr){
              data.onReandr(header);
          }
        }
      },
      placeholder: "ui-state-highlight"
    });
  };
   $.extend({
     common:new common()
   });
   Handlebars.registerHelper("getImgHeightForImgList",function(size, column,height) {

           height=parseInt(height.replace("px",''));
           var row=Math.ceil(size/column)
           return (height/row)+"px";
       });
       Handlebars.registerHelper("getFloatWidth",function(column) {
           return 100/column;
       });
}(window.jQuery);
!function($){
 var lableCommon={
  icon:'icon-biaoti',
  lable:'标题',
  type:'title',
  template:'<label class="commons-lable commons" > {{text}} </lable>',
  text:'请输入标题内容',
  cssStyle:{
    color:'black',
    'font-size':'14px',
    'background-color':'#f0f0f0',
    height:'28px'
  }
}
$.common.commons.baseCommons.addItem(lableCommon);
}(window.jQuery);
!function($){
  var titleCommons={
      icon:'icon-wenben',
      lable:'文本',
      template:'<div>'+
                '<span class="commons-title commons vcenter"> {{text}}</span>'+
               '</div>',
      text:'请输入文本内容',
      type:"label",
      cssStyle:{
        color:'black',
        'font-size':'12px',
        'text-align':'left'
      }
    };
$.common.commons.baseCommons.addItem(titleCommons);

}(window.jQuery);
!function($){
var button={
  icon:'icon-anniu',
  lable:'按钮',
  type:'button',
  template:'  <div style="background:white">'+
              '<a href="javascript:;" class="weui-btn weui-btn_warn commons-button commons">{{text}}</a>'+
           '</div>',
  text:'按钮',
  cssStyle:{
    color:'white',
    'font-size':'14px',
    'background-color':'#e64340',
    'border-radius': '0px',
    width:'100px',
    height:'35px'
  }
};
  $.common.commons.baseCommons.addItem(button);
}(window.jQuery);
!function($){
    var img={
        icon:'icon-tupian',
        lable:'图片',
        type:'img',
        template:' <div class="vcenter" ><img class="commons-img commons " src="{{{imgUrl}}}"/></div>',
        imgUrl:'http://uploads.xuexila.com/allimg/1611/764-16111Q02U9.jpg',
        cssStyle:{
            color:'white',
            'font-size':'14px',
            'background-color':'#e64340',
            'border-radius': '0px',
            width:'100%',height:'100px'
        }
    };
    $.common.commons.baseCommons.addItem(img);
}(window.jQuery);

!function($){
    var imgList={
        icon:'icon-uipiclist',
        lable:'图片列表',
        type:'imgList',
        column:3,
        template:'<div class="commons-imgList commons">'+
                '{{#each data }}'+
                '<div style="width:{{getFloatWidth ../column}}%;height:{{getImgHeightForImgList ../data.length ../column ../cssStyle.height}}" class="item">'+
                '<img  src="{{imgUrl}}">'+
                '<span class="title">{{title}}</span>'+
                '</div>'+
                '{{/each}}'+
                '</div>',
        data:[
            {imgUrl:'http://i02.pictn.sogoucdn.com/9e6f1d432aaa9aab',title:'图片一'},
            {imgUrl:'http://i02.pictn.sogoucdn.com/30a2e0e0da6f35a0',title:'图片二'},
            {imgUrl:'http://img.19yxw.com/wy/update/2015818/201581812562060364.jpg',title:'图片三'},
            {imgUrl:'http://i01.pic.sogou.com/0f3689382065243d',title:'图片四'},
            {imgUrl:'http://i01.pictn.sogoucdn.com/9c760130c16601d3',title:'图片五'},
            {imgUrl:'http://i01.pictn.sogoucdn.com/9c760130c16601d3',title:'图片六'}
            ],
        cssStyle:{
            color:'white',
            'font-size':'14px',
            'background-color':'white',
            'border-radius': '0px',
            height:'200px'
        }
    };
    $.common.commons.baseCommons.addItem(imgList);
}(window.jQuery);

!function($){
    var classify={
        icon:'icon-fenlei',
        lable:'分类',
        type:'classify',
        template:
        '<div class="commons-classify commons swiper-container weui-navbar ">'
           + '{{#each data}}'
            +'<div class="weui-navbar__item vcenter">{{this.value}}</div>'+
          '{{/each}}'+
        '</div>',
        data:[
            {value:'分类一'},
            {value:'分类二'},
            {value:'分类三'},
            {value:'分类四'},
        ],
        cssStyle:{
            color:'#908a8a',
            'background-color':'rgb(226, 224, 221)',
            width:'100%',
            height:'30px'
        }
    };
    $.common.commons.baseCommons.addItem(classify);
}(window.jQuery);
!function($){
    var imgBannerCommons={
        icon:'icon-lunbozutu',
        lable:'图片轮播',
        template:
        '<div class="swiper-container  commons-imgBanner commons">'
            + '<div class="swiper-wrapper">'
                    + '{{#each data}}'
                        + '<div class="swiper-slide">'+'<img src="{{this.imgUrl}}" alt=""/>'+'</div>'
                    + '{{/each}}'+
            + '</div>'+

        '</div>',
        data:[
            {imgUrl:'/wei/img/swiper-1.jpg'},
            {imgUrl:'/wei/img/swiper-2.jpg'},
            {imgUrl:'/wei/img/swiper-3.jpg'},
        ],
        type:"imgBanner",
        onReandr:function(v){
            v.find(".swiper-container").swiper({
                autoplayDisableOnInteraction:false,
                loop : true,
                autoplay:1500
            });
        },
        cssStyle:{
            color:'white',
            'background-color':'#e64340',
            'border-radius': '0px',
            width:'100%',
            height:'200px'
        }
    };
    $.common.commons.baseCommons.addItem(imgBannerCommons);

}(window.jQuery);!function($){
    var dataList={
        icon:'icon-liebiao-copy',
        lable:'列表',
        type:'dataList',
        template:' <div class="weui-panel weui-panel_access  commons-dataList commons">'+
                            '<div class="weui-panel__bd">'+
                                '{{#each data}}'+
                                    '<span class="weui-media-box weui-media-box_appmsg">'+
                                     ' <div class="weui-media-box__hd">'+
                                         '<img class="weui-media-box__thumb" src="{{imgUrl}}">'+
                                      '</div>'+
                                    '<div class="weui-media-box__bd">'+
                                       '<h4 class="weui-media-box__title">{{title}}</h4>'+
                                        '<p class="weui-media-box__desc">{{text}}</p>'+
                                    '</div>'+
                                   '</span>'+
                                '{{/each}}'+
                        '</div>'+
                   '</div>',
        data:[
            {
            imgUrl:'http://icon.nipic.com/BannerPic/20170511/original/20170511102754_1.jpg',
            title:'标题',
            text:'我是简介',
            },
            {
                imgUrl:'http://icon.nipic.com/BannerPic/20170511/original/20170511102754_1.jpg',
                title:'标题',
                text:'我是简介',
            },
            {
                imgUrl:'http://icon.nipic.com/BannerPic/20170511/original/20170511102754_1.jpg',
                title:'标题',
                text:'我是简介',
            }
        ],
        cssStyle:{
        }
    }
    $.common.commons.baseCommons.addItem(dataList);
}(window.jQuery);

!function($){
    var video={
        icon:'icon-shipin',
        lable:'视频',
        type:'video',
        template:' <div class="commons-video commons " >'+
                    '{{{videoUrl}}}'+
                    '</div>',
            videoUrl:"<iframe height=498 width=510 src='http://player.youku.com/embed/XMjgzNjcxNDA3Ng==' frameborder=0 'allowfullscreen'></iframe>",
        cssStyle:{
            height:'200px','background-color': '#B3B3B3'
        }
    };
    $.common.commons.baseCommons.addItem(video);
}(window.jQuery);
!function($){
    var music={
        icon:'icon-yinpin',
        lable:'音频',
        type:'music',
        template:
        '<div class="commons-music commons">'+
            '<audio controls>'+
                '<source src="http://v.57dj.com/v/11130861/43ae33b2641630f38884b78f9a3f58ee.mp3" />'+
            '</audio>'+
        '</div>',
        cssStyle:{
            height:'40px','background-color': '#B3B3B3'
        }
    };
    alert(JSON.stringify($.common.commons.otherCommons));
    $.common.commons.otherCommons.addItem(music);
}(window.jQuery);!function($){
  var common=function(){
  };
  common.prototype.confg={
    baseTemplae:'  <div class="control-wrap">'+
        '<span  class="move-handle">'+
            '<i ></i>'+
            '<i ></i>'+
            '<i ></i>'+
        '</span>'+
        '<span class="ele-delete-icon" title="删除">×</span>'+
      '</div>'
  }
  common.prototype.commons={
    baseCommons:{
      addItem:function(v){
        this.items.push(v);
      },
      items:[],
      el:'#baseCommons'
    },
    weightCommons:{
      addItem:function(v){
        this.items.push(v);
      },
      items:[],
      el:'#weightCommons'
    },
    otherCommons:{
      addItem:function(v){
          alert(JSON.stringify(this));
        this.items.push(v);
      },
      items:[],
      el:'#otherCommons'
    }
  };
  common.prototype.init=function(){
      for(var i in this.commons){
          const o=this.commons[i];

          const panel=$(o.el);

          o.items.forEach(function(k){
              const html=$("<li class='draggable' > "+
                      "<div class='handle'>"+
                      "<i class='icon-container iconfont "+k.icon+"'></i> "+
                      "<span>"+k.lable+"</span> "+
                      "</div>"+
                      "</li>");

            html.data("params",k);
            panel.append(html);
      });
    };
  $( ".draggable" ).draggable({
        cursor: "move",
        handle:'.handle',
        connectToSortable: ".droppable",
        opacity: 0.7,
        appendTo:'body',
        helper: function( e,u ) {
          var target=$(e.target);
          if(target.is(".icon-container") || target.is("span")){
            target=target.parent() ;
          }

          var panel=$( "<div class='ui-widget-header'><div class='ui-widget-header-container'>"+target.html()+"</div></div>");
          panel.data("params",target.parent().data("params"));
          return panel;
        },
        revert: false
    });

    $( ".droppable" ).sortable({
      revert: false,
      axis:'y',
      appendTo:'body',
      cursor:'move',
      handle:".move-handle",
      tolerance:"intersect",
      beforeStop:function(e,u,h,i){
        var type="";
        if($(u.item).is(".ui-widget-header")){
            var header=$($(".app-wrap").find(".ui-widget-header")[0]);
            var data=header.data("params");
            header.css({width:"100%",height:'initial'});
            var soure=$.common.confg.baseTemplae+data.template;
            var templ=Handlebars.compile(soure);
            var commons=$(templ(data));
            header.html(commons);
            header.find(".commons").css(data.cssStyle);
            $(".app-wrap .commons-warp.select").removeClass("select");
            header.removeClass("ui-widget-header").addClass("commons-warp").addClass("select");
            if(data.onReandr){
              data.onReandr(header);
          }
        }
      },
      placeholder: "ui-state-highlight"
    });
  };
   $.extend({
     common:new common()
   });
   Handlebars.registerHelper("getImgHeightForImgList",function(size, column,height) {

           height=parseInt(height.replace("px",''));
           var row=Math.ceil(size/column)
           return (height/row)+"px";
       });
       Handlebars.registerHelper("getFloatWidth",function(column) {
           return 100/column;
       });
}(window.jQuery);
!function($){
 var lableCommon={
  icon:'icon-biaoti',
  lable:'标题',
  type:'title',
  template:'<label class="commons-lable commons" > {{text}} </lable>',
  text:'请输入标题内容',
  cssStyle:{
    color:'black',
    'font-size':'14px',
    'background-color':'#f0f0f0',
    height:'28px'
  }
}
$.common.commons.baseCommons.addItem(lableCommon);
}(window.jQuery);
!function($){
  var titleCommons={
      icon:'icon-wenben',
      lable:'文本',
      template:'<div>'+
                '<span class="commons-title commons vcenter"> {{text}}</span>'+
               '</div>',
      text:'请输入文本内容',
      type:"label",
      cssStyle:{
        color:'black',
        'font-size':'12px',
        'text-align':'left'
      }
    };
$.common.commons.baseCommons.addItem(titleCommons);

}(window.jQuery);
!function($){
var button={
  icon:'icon-anniu',
  lable:'按钮',
  type:'button',
  template:'  <div style="background:white">'+
              '<a href="javascript:;" class="weui-btn weui-btn_warn commons-button commons">{{text}}</a>'+
           '</div>',
  text:'按钮',
  cssStyle:{
    color:'white',
    'font-size':'14px',
    'background-color':'#e64340',
    'border-radius': '0px',
    width:'100px',
    height:'35px'
  }
};
  $.common.commons.baseCommons.addItem(button);
}(window.jQuery);
!function($){
    var img={
        icon:'icon-tupian',
        lable:'图片',
        type:'img',
        template:' <div class="vcenter" ><img class="commons-img commons " src="{{{imgUrl}}}"/></div>',
        imgUrl:'http://uploads.xuexila.com/allimg/1611/764-16111Q02U9.jpg',
        cssStyle:{
            color:'white',
            'font-size':'14px',
            'background-color':'#e64340',
            'border-radius': '0px',
            width:'100%',height:'100px'
        }
    };
    $.common.commons.baseCommons.addItem(img);
}(window.jQuery);

!function($){
    var imgList={
        icon:'icon-uipiclist',
        lable:'图片列表',
        type:'imgList',
        column:3,
        template:'<div class="commons-imgList commons">'+
                '{{#each data }}'+
                '<div style="width:{{getFloatWidth ../column}}%;height:{{getImgHeightForImgList ../data.length ../column ../cssStyle.height}}" class="item">'+
                '<img  src="{{imgUrl}}">'+
                '<span class="title">{{title}}</span>'+
                '</div>'+
                '{{/each}}'+
                '</div>',
        data:[
            {imgUrl:'http://i02.pictn.sogoucdn.com/9e6f1d432aaa9aab',title:'图片一'},
            {imgUrl:'http://i02.pictn.sogoucdn.com/30a2e0e0da6f35a0',title:'图片二'},
            {imgUrl:'http://img.19yxw.com/wy/update/2015818/201581812562060364.jpg',title:'图片三'},
            {imgUrl:'http://i01.pic.sogou.com/0f3689382065243d',title:'图片四'},
            {imgUrl:'http://i01.pictn.sogoucdn.com/9c760130c16601d3',title:'图片五'},
            {imgUrl:'http://i01.pictn.sogoucdn.com/9c760130c16601d3',title:'图片六'}
            ],
        cssStyle:{
            color:'white',
            'font-size':'14px',
            'background-color':'white',
            'border-radius': '0px',
            height:'200px'
        }
    };
    $.common.commons.baseCommons.addItem(imgList);
}(window.jQuery);

!function($){
    var classify={
        icon:'icon-fenlei',
        lable:'分类',
        type:'classify',
        template:
        '<div class="commons-classify commons swiper-container weui-navbar ">'
           + '{{#each data}}'
            +'<div class="weui-navbar__item vcenter">{{this.value}}</div>'+
          '{{/each}}'+
        '</div>',
        data:[
            {value:'分类一'},
            {value:'分类二'},
            {value:'分类三'},
            {value:'分类四'},
        ],
        cssStyle:{
            color:'#908a8a',
            'background-color':'rgb(226, 224, 221)',
            width:'100%',
            height:'30px'
        }
    };
    $.common.commons.baseCommons.addItem(classify);
}(window.jQuery);
!function($){
    var imgBannerCommons={
        icon:'icon-lunbozutu',
        lable:'图片轮播',
        template:
        '<div class="swiper-container  commons-imgBanner commons">'
            + '<div class="swiper-wrapper">'
                    + '{{#each data}}'
                        + '<div class="swiper-slide">'+'<img src="{{this.imgUrl}}" alt=""/>'+'</div>'
                    + '{{/each}}'+
            + '</div>'+

        '</div>',
        data:[
            {imgUrl:'/wei/img/swiper-1.jpg'},
            {imgUrl:'/wei/img/swiper-2.jpg'},
            {imgUrl:'/wei/img/swiper-3.jpg'},
        ],
        type:"imgBanner",
        onReandr:function(v){
            v.find(".swiper-container").swiper({
                autoplayDisableOnInteraction:false,
                loop : true,
                autoplay:1500
            });
        },
        cssStyle:{
            color:'white',
            'background-color':'#e64340',
            'border-radius': '0px',
            width:'100%',
            height:'200px'
        }
    };
    $.common.commons.baseCommons.addItem(imgBannerCommons);

}(window.jQuery);!function($){
    var dataList={
        icon:'icon-liebiao-copy',
        lable:'列表',
        type:'dataList',
        template:' <div class="weui-panel weui-panel_access  commons-dataList commons">'+
                            '<div class="weui-panel__bd">'+
                                '{{#each data}}'+
                                    '<span class="weui-media-box weui-media-box_appmsg">'+
                                     ' <div class="weui-media-box__hd">'+
                                         '<img class="weui-media-box__thumb" src="{{imgUrl}}">'+
                                      '</div>'+
                                    '<div class="weui-media-box__bd">'+
                                       '<h4 class="weui-media-box__title">{{title}}</h4>'+
                                        '<p class="weui-media-box__desc">{{text}}</p>'+
                                    '</div>'+
                                   '</span>'+
                                '{{/each}}'+
                        '</div>'+
                   '</div>',
        data:[
            {
            imgUrl:'http://icon.nipic.com/BannerPic/20170511/original/20170511102754_1.jpg',
            title:'标题',
            text:'我是简介',
            },
            {
                imgUrl:'http://icon.nipic.com/BannerPic/20170511/original/20170511102754_1.jpg',
                title:'标题',
                text:'我是简介',
            },
            {
                imgUrl:'http://icon.nipic.com/BannerPic/20170511/original/20170511102754_1.jpg',
                title:'标题',
                text:'我是简介',
            }
        ],
        cssStyle:{
        }
    }
    $.common.commons.baseCommons.addItem(dataList);
}(window.jQuery);

!function($){
    var video={
        icon:'icon-shipin',
        lable:'视频',
        type:'video',
        template:' <div class="commons-video commons " >'+
                    '{{{videoUrl}}}'+
                    '</div>',
            videoUrl:"<iframe height=498 width=510 src='http://player.youku.com/embed/XMjgzNjcxNDA3Ng==' frameborder=0 'allowfullscreen'></iframe>",
        cssStyle:{
            height:'200px','background-color': '#B3B3B3'
        }
    };
    $.common.commons.baseCommons.addItem(video);
}(window.jQuery);
!function($){
    var music={
        icon:'icon-yinpin',
        lable:'音频',
        type:'music',
        template:
        '<div class="commons-music commons">'+
            '<audio controls>'+
                '<source src="http://61.137.191.80/8F/AB/8F1BF40AD2715896EAF9822AA17085C4C0FB77AB.mp3" />'+
            '</audio>'+
        '</div>',
        cssStyle:{
            height:'40px','background-color': '#B3B3B3'
        }
    };
    alert(JSON.stringify($.common.commons.otherCommons));
    $.common.commons.otherCommons.addItem(music);
}(window.jQuery);!function($){
  var common=function(){
  };
  common.prototype.confg={
    baseTemplae:'  <div class="control-wrap">'+
        '<span  class="move-handle">'+
            '<i ></i>'+
            '<i ></i>'+
            '<i ></i>'+
        '</span>'+
        '<span class="ele-delete-icon" title="删除">×</span>'+
      '</div>'
  }
  common.prototype.commons={
    baseCommons:{
      addItem:function(v){
        this.items.push(v);
      },
      items:[],
      el:'#baseCommons'
    },
    weightCommons:{
      addItem:function(v){
        this.items.push(v);
      },
      items:[],
      el:'#weightCommons'
    },
    otherCommons:{
      addItem:function(v){
          alert(JSON.stringify(this));
        this.items.push(v);
      },
      items:[],
      el:'#otherCommons'
    }
  };
  common.prototype.init=function(){
      for(var i in this.commons){
          const o=this.commons[i];

          const panel=$(o.el);

          o.items.forEach(function(k){
              const html=$("<li class='draggable' > "+
                      "<div class='handle'>"+
                      "<i class='icon-container iconfont "+k.icon+"'></i> "+
                      "<span>"+k.lable+"</span> "+
                      "</div>"+
                      "</li>");

            html.data("params",k);
            panel.append(html);
      });
    };
  $( ".draggable" ).draggable({
        cursor: "move",
        handle:'.handle',
        connectToSortable: ".droppable",
        opacity: 0.7,
        appendTo:'body',
        helper: function( e,u ) {
          var target=$(e.target);
          if(target.is(".icon-container") || target.is("span")){
            target=target.parent() ;
          }

          var panel=$( "<div class='ui-widget-header'><div class='ui-widget-header-container'>"+target.html()+"</div></div>");
          panel.data("params",target.parent().data("params"));
          return panel;
        },
        revert: false
    });

    $( ".droppable" ).sortable({
      revert: false,
      axis:'y',
      appendTo:'body',
      cursor:'move',
      handle:".move-handle",
      tolerance:"intersect",
      beforeStop:function(e,u,h,i){
        var type="";
        if($(u.item).is(".ui-widget-header")){
            var header=$($(".app-wrap").find(".ui-widget-header")[0]);
            var data=header.data("params");
            header.css({width:"100%",height:'initial'});
            var soure=$.common.confg.baseTemplae+data.template;
            var templ=Handlebars.compile(soure);
            var commons=$(templ(data));
            header.html(commons);
            header.find(".commons").css(data.cssStyle);
            $(".app-wrap .commons-warp.select").removeClass("select");
            header.removeClass("ui-widget-header").addClass("commons-warp").addClass("select");
            if(data.onReandr){
              data.onReandr(header);
          }
        }
      },
      placeholder: "ui-state-highlight"
    });
  };
   $.extend({
     common:new common()
   });
   Handlebars.registerHelper("getImgHeightForImgList",function(size, column,height) {

           height=parseInt(height.replace("px",''));
           var row=Math.ceil(size/column)
           return (height/row)+"px";
       });
       Handlebars.registerHelper("getFloatWidth",function(column) {
           return 100/column;
       });
}(window.jQuery);
!function($){
 var lableCommon={
  icon:'icon-biaoti',
  lable:'标题',
  type:'title',
  template:'<label class="commons-lable commons" > {{text}} </lable>',
  text:'请输入标题内容',
  cssStyle:{
    color:'black',
    'font-size':'14px',
    'background-color':'#f0f0f0',
    height:'28px'
  }
}
$.common.commons.baseCommons.addItem(lableCommon);
}(window.jQuery);
!function($){
  var titleCommons={
      icon:'icon-wenben',
      lable:'文本',
      template:'<div>'+
                '<span class="commons-title commons vcenter"> {{text}}</span>'+
               '</div>',
      text:'请输入文本内容',
      type:"label",
      cssStyle:{
        color:'black',
        'font-size':'12px',
        'text-align':'left'
      }
    };
$.common.commons.baseCommons.addItem(titleCommons);

}(window.jQuery);
!function($){
var button={
  icon:'icon-anniu',
  lable:'按钮',
  type:'button',
  template:'  <div style="background:white">'+
              '<a href="javascript:;" class="weui-btn weui-btn_warn commons-button commons">{{text}}</a>'+
           '</div>',
  text:'按钮',
  cssStyle:{
    color:'white',
    'font-size':'14px',
    'background-color':'#e64340',
    'border-radius': '0px',
    width:'100px',
    height:'35px'
  }
};
  $.common.commons.baseCommons.addItem(button);
}(window.jQuery);
!function($){
    var img={
        icon:'icon-tupian',
        lable:'图片',
        type:'img',
        template:' <div class="vcenter" ><img class="commons-img commons " src="{{{imgUrl}}}"/></div>',
        imgUrl:'http://uploads.xuexila.com/allimg/1611/764-16111Q02U9.jpg',
        cssStyle:{
            color:'white',
            'font-size':'14px',
            'background-color':'#e64340',
            'border-radius': '0px',
            width:'100%',height:'100px'
        }
    };
    $.common.commons.baseCommons.addItem(img);
}(window.jQuery);

!function($){
    var imgList={
        icon:'icon-uipiclist',
        lable:'图片列表',
        type:'imgList',
        column:3,
        template:'<div class="commons-imgList commons">'+
                '{{#each data }}'+
                '<div style="width:{{getFloatWidth ../column}}%;height:{{getImgHeightForImgList ../data.length ../column ../cssStyle.height}}" class="item">'+
                '<img  src="{{imgUrl}}">'+
                '<span class="title">{{title}}</span>'+
                '</div>'+
                '{{/each}}'+
                '</div>',
        data:[
            {imgUrl:'http://i02.pictn.sogoucdn.com/9e6f1d432aaa9aab',title:'图片一'},
            {imgUrl:'http://i02.pictn.sogoucdn.com/30a2e0e0da6f35a0',title:'图片二'},
            {imgUrl:'http://img.19yxw.com/wy/update/2015818/201581812562060364.jpg',title:'图片三'},
            {imgUrl:'http://i01.pic.sogou.com/0f3689382065243d',title:'图片四'},
            {imgUrl:'http://i01.pictn.sogoucdn.com/9c760130c16601d3',title:'图片五'},
            {imgUrl:'http://i01.pictn.sogoucdn.com/9c760130c16601d3',title:'图片六'}
            ],
        cssStyle:{
            color:'white',
            'font-size':'14px',
            'background-color':'white',
            'border-radius': '0px',
            height:'200px'
        }
    };
    $.common.commons.baseCommons.addItem(imgList);
}(window.jQuery);

!function($){
    var classify={
        icon:'icon-fenlei',
        lable:'分类',
        type:'classify',
        template:
        '<div class="commons-classify commons swiper-container weui-navbar ">'
           + '{{#each data}}'
            +'<div class="weui-navbar__item vcenter">{{this.value}}</div>'+
          '{{/each}}'+
        '</div>',
        data:[
            {value:'分类一'},
            {value:'分类二'},
            {value:'分类三'},
            {value:'分类四'},
        ],
        cssStyle:{
            color:'#908a8a',
            'background-color':'rgb(226, 224, 221)',
            width:'100%',
            height:'30px'
        }
    };
    $.common.commons.baseCommons.addItem(classify);
}(window.jQuery);
!function($){
    var imgBannerCommons={
        icon:'icon-lunbozutu',
        lable:'图片轮播',
        template:
        '<div class="swiper-container  commons-imgBanner commons">'
            + '<div class="swiper-wrapper">'
                    + '{{#each data}}'
                        + '<div class="swiper-slide">'+'<img src="{{this.imgUrl}}" alt=""/>'+'</div>'
                    + '{{/each}}'+
            + '</div>'+

        '</div>',
        data:[
            {imgUrl:'/wei/img/swiper-1.jpg'},
            {imgUrl:'/wei/img/swiper-2.jpg'},
            {imgUrl:'/wei/img/swiper-3.jpg'},
        ],
        type:"imgBanner",
        onReandr:function(v){
            v.find(".swiper-container").swiper({
                autoplayDisableOnInteraction:false,
                loop : true,
                autoplay:1500
            });
        },
        cssStyle:{
            color:'white',
            'background-color':'#e64340',
            'border-radius': '0px',
            width:'100%',
            height:'200px'
        }
    };
    $.common.commons.baseCommons.addItem(imgBannerCommons);

}(window.jQuery);!function($){
    var dataList={
        icon:'icon-liebiao-copy',
        lable:'列表',
        type:'dataList',
        template:' <div class="weui-panel weui-panel_access  commons-dataList commons">'+
                            '<div class="weui-panel__bd">'+
                                '{{#each data}}'+
                                    '<span class="weui-media-box weui-media-box_appmsg">'+
                                     ' <div class="weui-media-box__hd">'+
                                         '<img class="weui-media-box__thumb" src="{{imgUrl}}">'+
                                      '</div>'+
                                    '<div class="weui-media-box__bd">'+
                                       '<h4 class="weui-media-box__title">{{title}}</h4>'+
                                        '<p class="weui-media-box__desc">{{text}}</p>'+
                                    '</div>'+
                                   '</span>'+
                                '{{/each}}'+
                        '</div>'+
                   '</div>',
        data:[
            {
            imgUrl:'http://icon.nipic.com/BannerPic/20170511/original/20170511102754_1.jpg',
            title:'标题',
            text:'我是简介',
            },
            {
                imgUrl:'http://icon.nipic.com/BannerPic/20170511/original/20170511102754_1.jpg',
                title:'标题',
                text:'我是简介',
            },
            {
                imgUrl:'http://icon.nipic.com/BannerPic/20170511/original/20170511102754_1.jpg',
                title:'标题',
                text:'我是简介',
            }
        ],
        cssStyle:{
        }
    }
    $.common.commons.baseCommons.addItem(dataList);
}(window.jQuery);

!function($){
    var video={
        icon:'icon-shipin',
        lable:'视频',
        type:'video',
        template:' <div class="commons-video commons " >'+
                    '{{{videoUrl}}}'+
                    '</div>',
            videoUrl:"<iframe height=498 width=510 src='http://player.youku.com/embed/XMjgzNjcxNDA3Ng==' frameborder=0 'allowfullscreen'></iframe>",
        cssStyle:{
            height:'200px','background-color': '#B3B3B3'
        }
    };
    $.common.commons.baseCommons.addItem(video);
}(window.jQuery);
!function($){
    var music={
        icon:'icon-yinpin',
        lable:'音频',
        type:'music',
        template:
        '<div class="commons-music commons">'+
            '<audio controls>'+
                '<source src="http://61.137.191.80/8F/AB/8F1BF40AD2715896EAF9822AA17085C4C0FB77AB.mp3" />'+
            '</audio>'+
        '</div>',
        cssStyle:{
            height:'35px','background-color': '#B3B3B3'
        }
    };
    alert(JSON.stringify($.common.commons.otherCommons));
    $.common.commons.otherCommons.addItem(music);
}(window.jQuery);!function($){
  var common=function(){
  };
  common.prototype.confg={
    baseTemplae:'  <div class="control-wrap">'+
        '<span  class="move-handle">'+
            '<i ></i>'+
            '<i ></i>'+
            '<i ></i>'+
        '</span>'+
        '<span class="ele-delete-icon" title="删除">×</span>'+
      '</div>'
  }
  common.prototype.commons={
    baseCommons:{
      addItem:function(v){
        this.items.push(v);
      },
      items:[],
      el:'#baseCommons'
    },
    weightCommons:{
      addItem:function(v){
        this.items.push(v);
      },
      items:[],
      el:'#weightCommons'
    },
    otherCommons:{
      addItem:function(v){
          alert(JSON.stringify(this));
        this.items.push(v);
      },
      items:[],
      el:'#otherCommons'
    }
  };
  common.prototype.init=function(){
      for(var i in this.commons){
          const o=this.commons[i];

          const panel=$(o.el);

          o.items.forEach(function(k){
              const html=$("<li class='draggable' > "+
                      "<div class='handle'>"+
                      "<i class='icon-container iconfont "+k.icon+"'></i> "+
                      "<span>"+k.lable+"</span> "+
                      "</div>"+
                      "</li>");

            html.data("params",k);
            panel.append(html);
      });
    };
  $( ".draggable" ).draggable({
        cursor: "move",
        handle:'.handle',
        connectToSortable: ".droppable",
        opacity: 0.7,
        appendTo:'body',
        helper: function( e,u ) {
          var target=$(e.target);
          if(target.is(".icon-container") || target.is("span")){
            target=target.parent() ;
          }

          var panel=$( "<div class='ui-widget-header'><div class='ui-widget-header-container'>"+target.html()+"</div></div>");
          panel.data("params",target.parent().data("params"));
          return panel;
        },
        revert: false
    });

    $( ".droppable" ).sortable({
      revert: false,
      axis:'y',
      appendTo:'body',
      cursor:'move',
      handle:".move-handle",
      tolerance:"intersect",
      beforeStop:function(e,u,h,i){
        var type="";
        if($(u.item).is(".ui-widget-header")){
            var header=$($(".app-wrap").find(".ui-widget-header")[0]);
            var data=header.data("params");
            header.css({width:"100%",height:'initial'});
            var soure=$.common.confg.baseTemplae+data.template;
            var templ=Handlebars.compile(soure);
            var commons=$(templ(data));
            header.html(commons);
            header.find(".commons").css(data.cssStyle);
            $(".app-wrap .commons-warp.select").removeClass("select");
            header.removeClass("ui-widget-header").addClass("commons-warp").addClass("select");
            if(data.onReandr){
              data.onReandr(header);
          }
        }
      },
      placeholder: "ui-state-highlight"
    });
  };
   $.extend({
     common:new common()
   });
   Handlebars.registerHelper("getImgHeightForImgList",function(size, column,height) {

           height=parseInt(height.replace("px",''));
           var row=Math.ceil(size/column)
           return (height/row)+"px";
       });
       Handlebars.registerHelper("getFloatWidth",function(column) {
           return 100/column;
       });
}(window.jQuery);
!function($){
 var lableCommon={
  icon:'icon-biaoti',
  lable:'标题',
  type:'title',
  template:'<label class="commons-lable commons" > {{text}} </lable>',
  text:'请输入标题内容',
  cssStyle:{
    color:'black',
    'font-size':'14px',
    'background-color':'#f0f0f0',
    height:'28px'
  }
}
$.common.commons.baseCommons.addItem(lableCommon);
}(window.jQuery);
!function($){
  var titleCommons={
      icon:'icon-wenben',
      lable:'文本',
      template:'<div>'+
                '<span class="commons-title commons vcenter"> {{text}}</span>'+
               '</div>',
      text:'请输入文本内容',
      type:"label",
      cssStyle:{
        color:'black',
        'font-size':'12px',
        'text-align':'left'
      }
    };
$.common.commons.baseCommons.addItem(titleCommons);

}(window.jQuery);
!function($){
var button={
  icon:'icon-anniu',
  lable:'按钮',
  type:'button',
  template:'  <div style="background:white">'+
              '<a href="javascript:;" class="weui-btn weui-btn_warn commons-button commons">{{text}}</a>'+
           '</div>',
  text:'按钮',
  cssStyle:{
    color:'white',
    'font-size':'14px',
    'background-color':'#e64340',
    'border-radius': '0px',
    width:'100px',
    height:'35px'
  }
};
  $.common.commons.baseCommons.addItem(button);
}(window.jQuery);
!function($){
    var img={
        icon:'icon-tupian',
        lable:'图片',
        type:'img',
        template:' <div class="vcenter" ><img class="commons-img commons " src="{{{imgUrl}}}"/></div>',
        imgUrl:'http://uploads.xuexila.com/allimg/1611/764-16111Q02U9.jpg',
        cssStyle:{
            color:'white',
            'font-size':'14px',
            'background-color':'#e64340',
            'border-radius': '0px',
            width:'100%',height:'100px'
        }
    };
    $.common.commons.baseCommons.addItem(img);
}(window.jQuery);

!function($){
    var imgList={
        icon:'icon-uipiclist',
        lable:'图片列表',
        type:'imgList',
        column:3,
        template:'<div class="commons-imgList commons">'+
                '{{#each data }}'+
                '<div style="width:{{getFloatWidth ../column}}%;height:{{getImgHeightForImgList ../data.length ../column ../cssStyle.height}}" class="item">'+
                '<img  src="{{imgUrl}}">'+
                '<span class="title">{{title}}</span>'+
                '</div>'+
                '{{/each}}'+
                '</div>',
        data:[
            {imgUrl:'http://i02.pictn.sogoucdn.com/9e6f1d432aaa9aab',title:'图片一'},
            {imgUrl:'http://i02.pictn.sogoucdn.com/30a2e0e0da6f35a0',title:'图片二'},
            {imgUrl:'http://img.19yxw.com/wy/update/2015818/201581812562060364.jpg',title:'图片三'},
            {imgUrl:'http://i01.pic.sogou.com/0f3689382065243d',title:'图片四'},
            {imgUrl:'http://i01.pictn.sogoucdn.com/9c760130c16601d3',title:'图片五'},
            {imgUrl:'http://i01.pictn.sogoucdn.com/9c760130c16601d3',title:'图片六'}
            ],
        cssStyle:{
            color:'white',
            'font-size':'14px',
            'background-color':'white',
            'border-radius': '0px',
            height:'200px'
        }
    };
    $.common.commons.baseCommons.addItem(imgList);
}(window.jQuery);

!function($){
    var classify={
        icon:'icon-fenlei',
        lable:'分类',
        type:'classify',
        template:
        '<div class="commons-classify commons swiper-container weui-navbar ">'
           + '{{#each data}}'
            +'<div class="weui-navbar__item vcenter">{{this.value}}</div>'+
          '{{/each}}'+
        '</div>',
        data:[
            {value:'分类一'},
            {value:'分类二'},
            {value:'分类三'},
            {value:'分类四'},
        ],
        cssStyle:{
            color:'#908a8a',
            'background-color':'rgb(226, 224, 221)',
            width:'100%',
            height:'30px'
        }
    };
    $.common.commons.baseCommons.addItem(classify);
}(window.jQuery);
!function($){
    var imgBannerCommons={
        icon:'icon-lunbozutu',
        lable:'图片轮播',
        template:
        '<div class="swiper-container  commons-imgBanner commons">'
            + '<div class="swiper-wrapper">'
                    + '{{#each data}}'
                        + '<div class="swiper-slide">'+'<img src="{{this.imgUrl}}" alt=""/>'+'</div>'
                    + '{{/each}}'+
            + '</div>'+

        '</div>',
        data:[
            {imgUrl:'/wei/img/swiper-1.jpg'},
            {imgUrl:'/wei/img/swiper-2.jpg'},
            {imgUrl:'/wei/img/swiper-3.jpg'},
        ],
        type:"imgBanner",
        onReandr:function(v){
            v.find(".swiper-container").swiper({
                autoplayDisableOnInteraction:false,
                loop : true,
                autoplay:1500
            });
        },
        cssStyle:{
            color:'white',
            'background-color':'#e64340',
            'border-radius': '0px',
            width:'100%',
            height:'200px'
        }
    };
    $.common.commons.baseCommons.addItem(imgBannerCommons);

}(window.jQuery);!function($){
    var dataList={
        icon:'icon-liebiao-copy',
        lable:'列表',
        type:'dataList',
        template:' <div class="weui-panel weui-panel_access  commons-dataList commons">'+
                            '<div class="weui-panel__bd">'+
                                '{{#each data}}'+
                                    '<span class="weui-media-box weui-media-box_appmsg">'+
                                     ' <div class="weui-media-box__hd">'+
                                         '<img class="weui-media-box__thumb" src="{{imgUrl}}">'+
                                      '</div>'+
                                    '<div class="weui-media-box__bd">'+
                                       '<h4 class="weui-media-box__title">{{title}}</h4>'+
                                        '<p class="weui-media-box__desc">{{text}}</p>'+
                                    '</div>'+
                                   '</span>'+
                                '{{/each}}'+
                        '</div>'+
                   '</div>',
        data:[
            {
            imgUrl:'http://icon.nipic.com/BannerPic/20170511/original/20170511102754_1.jpg',
            title:'标题',
            text:'我是简介',
            },
            {
                imgUrl:'http://icon.nipic.com/BannerPic/20170511/original/20170511102754_1.jpg',
                title:'标题',
                text:'我是简介',
            },
            {
                imgUrl:'http://icon.nipic.com/BannerPic/20170511/original/20170511102754_1.jpg',
                title:'标题',
                text:'我是简介',
            }
        ],
        cssStyle:{
        }
    }
    $.common.commons.baseCommons.addItem(dataList);
}(window.jQuery);

!function($){
    var video={
        icon:'icon-shipin',
        lable:'视频',
        type:'video',
        template:' <div class="commons-video commons " >'+
                    '{{{videoUrl}}}'+
                    '</div>',
            videoUrl:"<iframe height=498 width=510 src='http://player.youku.com/embed/XMjgzNjcxNDA3Ng==' frameborder=0 'allowfullscreen'></iframe>",
        cssStyle:{
            height:'200px','background-color': '#B3B3B3'
        }
    };
    $.common.commons.baseCommons.addItem(video);
}(window.jQuery);
!function($){
    var music={
        icon:'icon-yinpin',
        lable:'音频',
        type:'music',
        template:
        '<div class="commons-music commons">'+
            '<audio controls style="width: 320px">'+
                '<source src="http://61.137.191.80/8F/AB/8F1BF40AD2715896EAF9822AA17085C4C0FB77AB.mp3" />'+
            '</audio>'+
        '</div>',
        cssStyle:{
            height:'32px','background-color': '#B3B3B3'
        }
    };
    alert(JSON.stringify($.common.commons.otherCommons));
    $.common.commons.otherCommons.addItem(music);
}(window.jQuery);